Playable Ads в один файл с Phaser3 и Webpack 5

Сегодня мы рассмотрим сборку, которая позволит вам автоматизировать процесс сборки ваших объявлений в один файл. На этот раз я буду использовать сборщик Webpack, который будет автоматически декодировать изображения и звуки в URI данные и, конечно же, оптимизировать и минимизировать ваш код и объединять все это в один index.html файл.

На первый взгляд, его немного сложнее настроить, чем Parcel, о котором я писал ранее. Однако в реальности Webpack также не требует специальных знаний, но предоставляет более гибкие настройки для различных режимов.

Использование репозитория github

Я предварительно собрал проект для вас в своем аккаунте github. Вам понадобятся NodeJS и Yarn 3. Теперь перейдем к проекту.

Вы можете скачать это вручную или клонировать проект (не забудьте зайти в правильный каталог):

git clone https://github.com/vardanyanlg/phaser3-webpack-playable.git

Убедитесь, что вы находитесь в проекте, если нет, то идите туда:

cd phaser3-webpack-playable

Теперь нужно установить все необходимые зависимости для работы проекта:

yarn install

Все готово к запуску проекта. Для локального тестирования используйте (localhost:8000 откроет автоматически в браузере)

yarn watch
или
yarn start

Построение окончательного файла

yarn build

Готовый index.html файл ждет вас в папке dist

Загрузка активов

Загрузка ресурсов объявляется в js/PreloaderScene.js. Теперь, чтобы обработать ваши файлы и подготовить их к работе, вам нужно добавить их в Phaser.
Вы можете использовать сцепление, чтобы избежать умножения этого каждый раз:

this
    .addAudio("custom_name",'.. /audio/filename.mp3')
    .addTexture("custom_name2",'.. /img/filename2.png')
    .addBitmapText('custom_name3',require('.. /font/filename3.png'),require('.. /font/filename3.xml'))
    .addAtlas('custom_name4',require('.. /img/filename4.png'),require('.. /img/filename4.json'))

Используйте Yarn Plug’n’Play

Чтобы не дублировать папку node_modules для каждого проекта, я рекомендую использовать Plug’n’Play от Yarn. Если после установки проекта вы заметили папку node_modules, просто попробуйте написать следующие команды в консоли:

yarn set version berry
yarn install

Теперь, после загрузки всех ресурсов, переходите в js/MainScene.js в котором вы создадите сам игровой процесс. Просто примените свои знания Phaser 3 и JavaScript и сделайте свою рекламу уникальной!

Вы также можете связаться со мной, и я создам для вас игровую рекламу на Phaser 3.