О чем этот пример

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    }

    create ()
    {
        const button = this.add.image(400, 300, 'logo').setInteractive();

        button.on('pointerup', this.openExternalLink, this);
    }

    openExternalLink ()
    {
        const tweet = 'I am testing a button from within a Phaser example';

        const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweet)}`;

        const s = window.open(url, '_blank');

        if (s && s.focus)
        {
            s.focus();
        }
        else if (!s)
        {
            window.location.href = url;
        }
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ассетов

Первым делом создаем класс сцены, наследующий от Phaser.Scene. В методе preload() задаем базовый URL для загрузки ассетов и загружаем изображение для кнопки. Это стандартный подход для работы с ресурсами в Phaser.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
}

Создание интерактивной кнопки

В методе create() мы создаем спрайт изображения на сцене и сразу делаем его интерактивным с помощью метода .setInteractive(). После этого назначаем обработчик события 'pointerup' (отпускание кнопки мыши или касания). В качестве обработчика указываем наш метод openExternalLink, а контекст this передаем для корректной работы внутри сцены.

create ()
{
    const button = this.add.image(400, 300, 'logo').setInteractive();

    button.on('pointerup', this.openExternalLink, this);
}

Безопасное открытие внешней ссылки

Метод openExternalLink формирует URL для твита и безопасно открывает его в новом окне. Ключевые моменты: 1. Текст твита кодируется с помощью encodeURIComponent для корректной передачи в URL. 2. Открытие окна через window.open(url, '_blank'). 3. Проверка на блокировку всплывающих окон: если окно открылось, даем ему фокус; если нет, переходим по ссылке в текущем окне.

openExternalLink ()
{
    const tweet = 'I am testing a button from within a Phaser example';

    const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweet)}`;

    const s = window.open(url, '_blank');

    if (s && s.focus)
    {
        s.focus();
    }
    else if (!s)
    {
        window.location.href = url;
    }
}

Конфигурация и запуск игры

Создаем стандартную конфигурацию игры Phaser, указывая наш класс сцены. Затем инстанцируем игру с этой конфигурацией.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Что попробовать дальше

Вы научились создавать интерактивные кнопки в Phaser 3 и обрабатывать клики для открытия внешних ссылок с учетом возможной блокировки всплывающих окон. Для экспериментов попробуйте

  1. Добавить эффекты наведения на кнопку через события 'pointerover' и 'pointerout'
  2. Использовать другие методы setInteractive, например, для обработки зоны клика
  3. Открывать не только Twitter, но и другие внешние сервисы, например, для авторизации OAuth