Как создать игровую рекламу на Phaser3 в один файл с помощью Parcel

Для того чтобы использовать свою игру для рекламы, нужно подготовить ее под требования рекламных сетей. И если проблему ограничения размера до 2-5мб не сложно решить, сжимая ресурсы вручную, то как собрать все в один index.html файл, который бы даже включал изображения? Модульные связующие устройства помогут вам в этом. Сегодня мы вместе установим один из самых простых сборщиков — Parcel.
С этим сборщиком довольно легко работать, так как он не требует обязательных конфигурационных файлов. Все, что вам нужно сделать, это подготовить стандартный файл пакета (package.json), который менеджер пакетов, такой как NPM или Yarn, может создать для вас.

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

Использование моего проекта github

Я подготовил для вас проект, который вы можете взять и начать работать над ним прямо сейчас. Вам понадобится NodeJS , а также Yarn 3 . Давайте посмотрим, как его использовать.

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

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

Далее нужно перейти в каталог клонированного объекта уже на вашем устройстве

cd phaser3-parcel-playable

Теперь вам нужно запустить установщик Yarn, чтобы он определил, какие модули необходимы для проекта и установил их.

yarn install

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

yarn watch

Чтобы собрать финальную версию проекта и объединить все файлы в один, выполните команду:

yarn build

Теперь у вас будет каталог «dist» с одним файлом «index.html«, который вы можете использовать в рекламных сетях.

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

Я использую структуру из двух сцен для Playable ads проектов. Все ресурсы должны быть добавлены в «js/PreloaderScene.js«. Так как ресурсы нужны в формате URI данных, это не поддерживается стандартным загрузчиком игр и вам придется отслеживать загрузку всех текстур вручную — поэтому я добавил свои собственные функции для более удобной загрузки.

Загрузить изображение

Используйте функцию «this.addTexture("custom_name", filenameCustom)» для загрузки изображений, а также импортируйте файл в каталог заранее import file_nameCustom from 'data-url:.. /img/file_name.png'. При использовании «data-url:» в начале ссылки на изображение, Parcel автоматически заменит его данными base64. Вы также можете сцепить «. addTexture().addTexture().addTexture()» и не использовать «this» каждый раз подряд.

Загрузка аудио

Parcel не декодирует автоматически звуки в base64, поэтому нужно вставить уже заранее подготовленный код. Используйте функцию «this.addAudio("custom_name",dataURI)» для загрузки звуков. Вам нужно заранее закодировать URI данныe самостоятельно.

Настройка качества изображения

Parcel может самостоятельно оптимизировать ваши изображения под заданные параметры для снижения веса. Гибкость конфигурации измеряется от 0 до 100 и настраивается в файле sharp.config.json . По умолчанию для моего проекта установлено качество изображения 90%.

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

Я также рекомендую использовать режим Plug’n’Play Yarn, чтобы предотвратить дублирование node_modules папки в каждом проекте. Это должно работать автоматически при установке проекта, однако в зависимости от ваших настроек это может быть не включено. Затем вы можете принудительно выполнить команду установить версию, и это должно сделать трюк.

yarn set version berry
yarn install

Теперь дело за вами — просто проявите творческий подход и создайте невероятную внутриигровую рекламу, которая поможет вам привлечь больше клиентов!

Вы также всегда можете обратиться ко мне за помощью в создании Playable Ads специально для вас.