Эффект свечения в Phaser3?

Кто-нибудь знает, как добавить простой эффект свечения к спрайту в Phaser3? Я видел несколько примеров в Phaser2, но не смог найти ничего для Phaser3.

Заранее спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
2 792
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Единственный эффект свечения Phaser 2, который я смог найти, это эффект https://codepen.io/Samid737/pen/ZyPvya, который добавляет компонент времени к https://gist.github.com/MatthewBarker/032c325ef8577c6d0188. Соответствующий бит - это фрагмент:

this.fragmentSrc = [
    'precision lowp float;',
    'varying vec2 vTextureCoord;',
    'varying vec4 vColor;',
    'uniform sampler2D uSampler;',
    'uniform float alpha;',
    'uniform float time;',
    'void main() {',
        'vec4 sum = vec4(0);',
        'vec2 texcoord = vTextureCoord;',
        'for(int xx = -4; xx <= 4; xx++) {',
            'for(int yy = -4; yy <= 4; yy++) {',
                'float dist = sqrt(float(xx*xx) + float(yy*yy));',
                'float factor = 0.0;',
                'if (dist == 0.0) {',
                    'factor = 2.0;',
                '} else {',
                    'factor = 2.0/abs(float(dist));',
                '}',
                'sum += texture2D(uSampler, texcoord + vec2(xx, yy) * 0.002) * (abs(sin(time))+0.06);',
            '}',
        '}',
        'gl_FragColor = sum * 0.025 + texture2D(uSampler, texcoord)*alpha;',
    '}'
];

Phaser 3 просто требует обновления некоторых из них. Используя официальный пример пользовательских конвейерных лабораторий:

var CustomPipeline = new Phaser.Class({
    Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
    initialize:
    function CustomPipeline (game)
    {
    Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
            game: game,
            renderer: game.renderer,
            fragShader: [
                'precision lowp float;',
                'varying vec2 outTexCoord;',
                'varying vec4 outTint;',
                'uniform sampler2D uMainSampler;',
                'uniform float alpha;',
                'uniform float time;',
                'void main() {',
                    'vec4 sum = vec4(0);',
                    'vec2 texcoord = outTexCoord;',
                    'for(int xx = -4; xx <= 4; xx++) {',
                        'for(int yy = -4; yy <= 4; yy++) {',
                            'float dist = sqrt(float(xx*xx) + float(yy*yy));',
                            'float factor = 0.0;',
                            'if (dist == 0.0) {',
                                'factor = 2.0;',
                            '} else {',
                                'factor = 2.0/abs(float(dist));',
                            '}',
                            'sum += texture2D(uMainSampler, texcoord + vec2(xx, yy) * 0.002) * (abs(sin(time))+0.06);',
                        '}',
                    '}',
                    'gl_FragColor = sum * 0.025 + texture2D(uMainSampler, texcoord)*alpha;',
                '}'
            ].join('\n')
        });
    } 
});

Затем вы можете загрузить это и назначить спрайтам:

function preload() {
    this.load.image('logo', 'assets/Phaser-Logo-Small.png');
    this.load.image('dude', 'assets/phaser-dude.png');

    customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
    customPipeline.setFloat1('alpha', 1.0);
}

function create() {

    this.add.sprite(500, 300, 'logo').setPipeline('Custom');
    this.add.sprite(50, 50, 'dude').setPipeline('Custom');
}

var time = 0.0;

function update()
{
    customPipeline.setFloat1('time', time);
    time += 0.05;
}

Джеймс, спасибо, что нашли время ответить! Я просто немного поигрался с этим, и, похоже, я могу заставить это работать для меня. Спасибо!

drew kroft 23.10.2018 03:26

Рад помочь. :)

James Skemp 23.10.2018 03:30

Спасибо за пример Phaser 3!

Pavel 30.01.2019 12:44

Предоставленный CustomPipeline, похоже, больше не работает в сегодняшнем Phaser 3. (я пробовал это с примером в лаборатории, и он просто затемняет спрайты)

Telokis 28.04.2019 23:06

@Telokis, вы уверены, что обновили все биты? Если вы используете лабораторный пример в качестве основы, вам необходимо обновить создание CustomPipeline, preload() и update(). Мне просто удалось получить эффект отскока.

James Skemp 29.04.2019 16:49

@JamesSkemp Хорошо, все работает, спасибо! Я забыл о функциях.

Telokis 30.04.2019 10:20

Другие вопросы по теме