Хорошая практика для использования почти одинаковых спрайтов в фазере.Альтернативы использованию большего количества спрайтов

Question

Итак, я работал в Unity, но я решил, что пришло время изменить что-то, что я знаю лучше: JavaScript. Я думал о переходе на Phaser.js, но у меня есть несколько вопросов, касающихся проблемы, с которой я столкнулся даже в Unity, и которую я не нашел решения в данный момент при поиске в Интернете. У меня нет кода для предоставления, так как я еще не начал программирование в Phaser, поэтому я постараюсь быть явным.

Моя идея игры в основном вращается вокруг света, который меняет цвет. Спрайты, которые у меня есть для источников света, выглядят одинаково, но только с разными цветами, но не полностью (только их части окрашены по-разному). Проблема в том, что в моей игре много разноцветных огней, и между ними нужно переключаться. Например, если один индикатор красный и вы нажимаете на него, он становится зеленым, например. Создание и загрузка такого количества спрайтов, которые выглядят практически одинаково, кажется плохой практикой, и мне интересно, есть ли способ изменить цвет спрайта или части спрайта кодом. Я знаю, что Phaser не поддерживает svg и что svg в играх - плохая идея в целом из-за проблем с производительностью, но это сэкономило бы мне много времени, чтобы просто добавить сгенерированный svg-код спрайтов, которые я использую, и просто изменить Заполните части, которые я хочу.

Итак, мой вопрос: каковы наилучшие альтернативы (если таковые имеются) использованию нескольких спрайтов или как вы можете изменить цвет определенных их частей?

Answer 1

Другой альтернативой, в зависимости от ваших легких спрайтов, является использование возможностей тонирования Phaser.

Как спрайты, так и изображения в Phaser могут быть тонированы, так как Phaser поддерживает группирование спрайтов, даже если вы хотите изменить толькочасть изображения, которую вы могли бы легко получить, чтобы каждый отображаемый объект состоял из двух спрайтов, один из которых одинаков для всех источников света (часть, которая не изменяется), а другой - также общий, но тонированный.

Пример использования Phaser 3 для тонирования изображения :

this.add.image(300, 300, 'pixel').setTint(0xff0000);

Документация для Phaser 3 setTint() Документация .

Пример Phaser 2 CEподкрашивание спрайта , если вы используете эту версию:

sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'atlas', 'greenJellyfish0000');
sprite.tint = Math.random() * 0xffffff;

Answer 2

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