Если вы когда-нибудь задумывались, как правильно настроить проект Facebook Instant Game с помощью PixiJS, эта статья может быть вам весьма полезна!

Поскольку у меня есть еще статьи о PixiJS, я решил взять существующее репо у одного из них и просто интегрировать в него библиотеку Facebook Instant Games lib. Источники также используют настройки из Статьи о настройке PixiJS v5, но не обязательно углубляться в это, чтобы понять тему.

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

Как мы тестируем?

Первое, что нам нужно сделать, прежде чем приступить к разработке, - это открыть нашу страницу localhost через https. Как я уже говорил ранее, я взял проект из своей другой статьи, в котором используются webpack и webpack-dev-server (прочтите статью, если вы не работали с ним раньше), поэтому есть только изменения, которые мы должны сделать в коде. чтобы заставить его работать: установите для свойства devServer.https в webpack.config.dev.js значение true. В моем случае весь конфиг выглядит так:

Так как ваша страница localhost открыта, в моем случае это https: // localhost: 3000.

Это зависит от обстоятельств, но вы, вероятно, видите следующее:

Нажмите «Перейти к локальному хосту (небезопасно)», и как только страница загрузится (это просто белый экран, или черный, или что-то еще, но это точно не игра), вы можете закрыть вкладку (мы собираетесь протестировать игру на другой странице, и в какой-то момент она может перестать работать, тогда вам нужно будет снова выполнить команду «Перейти к локальному хосту»).

Затем, если у вас нет приложения на Facebook, вам нужно его создать. Зайдите сюда и нажмите Добавить новое приложение:

Зайдите в «Личный кабинет» приложения и настройте продукт «Мгновенная игра»:

После этого все, что вам нужно, это открыть следующую ссылку, заменив YOUR_APP_ID на номер, который вы можете найти в верхней части панели администратора FB (APP_ID):

https://www.facebook.com/embed/instantgames/YOUR_APP_ID/player?game_url=https://localhost:3000

Это все! Вы можете открыть консоль браузера, включить мобильный режим и протестировать там, чтобы иметь соответствующий размер экрана для тестов.

Импортировать библиотеку мгновенных игр Facebook

Вскоре библиотека называется FBInstant, поэтому давайте использовать это имя. Импортировать так же просто, как просто поместить тег сценария в тег тела нашего основного файла index.html:

Подождите OnLoad

Когда мы импортируем FBInstant lib, она помещается в глобальную область видимости (окно). Итак, чтобы быть уверенным, что FBInstant готов и window.FBInstant не является неопределенным, мы ждем, пока страница не загрузится.

Лучше сделать это в основном файле index.js, где вы храните все настройки инициализации, потому что таким образом вы не будете иметь дело с избыточными строками кода в App.js и других скриптах, избегая засорения кода.

В моем случае index.js находится в корне, и это запись приложения:

Инициализировать FBInstant

Это необходимо, и это очень важный момент, поскольку неправильная инициализация (а точнее неправильное время, когда мы это делаем) может привести к тому, что ваша игра без исключения случайно зависнет или даже не запустится вообще.

Чем раньше вы инициализируете FBInstant, тем лучше, но в любом случае не делайте ничего, пока инициализация не завершится! На мой взгляд, лучшее место сразу после onLoad ивента:

Как вы заметили, я использую синтаксис async / await, поскольку он уменьшает объем кода, и если вы не знакомы с ним, я предлагаю прочитать об этом подробнее. В противном случае в ближайшее время:

  1. Ключевое слово async мы пишем перед объявлением функции, чтобы сообщить коду, что функция должна иметь возможность работать с ключевым словом await;
  2. Ключевое слово await мы пишем внутри функции async перед вызовом функции, которая возвращает обещание. Код переходит на следующую строку (после строки с ключевым словом await) только после выполнения обещания.

Показать загрузку

FBInstant показывает игрокам полосу загрузки, и вам нужно заботиться только о самих процентах (вызывая FBInstant.setLoadingProgress и передавая количество процентов от 0 до 100). Поэтому мы просто берем проценты из загрузчика PixiJS и передаем их FBInstant.

Я реализовал это следующим образом: внутри метода init класса App я загружаю ресурсы и вызываю обратный вызов каждый раз, когда изменяется ход загрузки. Метод init возвращает Promise, который разрешается, когда загрузка завершена, так что мы можем использовать ключевое слово await в index.js (почему бы и нет? 😊) для обработки окончания загрузки .

Итак, в index.js есть следующее:

и далее в App.js:

После этого вы можете протестировать свое приложение и убедиться, что все работает! Игра успешно работает как мгновенная игра Facebook, и вы можете использовать все функции библиотеки через глобальное свойство FBInstant!

В следующих статьях я расскажу больше (создание, развертывание, использование рейтинговых таблиц в качестве замены серверной части и т. Д.), Так что следите за обновлениями!

Я был бы рад поделиться демонстрацией, но игра должна быть одобрена FB, чтобы стать общедоступной, поэтому не стесняйтесь попробовать ее самостоятельно, используя репозиторий ниже! :)

Репозиторий Git: https://github.com/ANVoevodin/pixijs_v5_fbinstant

Скоро появятся новые статьи на эту тему, так что не пропустите их и подпишитесь здесь, в LinkedIn и Twitter!