Делитесь контентом вашей игры со всем миром с помощью Firebase Hosting
Динамическое предоставление контента из облачного хранилища, чтобы ваша игра стала вирусной
Сегодняшние игры живут и умирают благодаря создаваемому ими общественному шумиху, а это значит, что вам нужно привлекать игроков еще до того, как они установят вашу игру. Я покажу вам, как я добился этого, интегрировав Firebase Hosting с моей игрой Swordchucks из моего предыдущего поста.
Делитесь игровым контентом со всем миром
Поскольку мой тезис состоит в том, что для успеха на сегодняшнем рынке игры нуждаются в социальной поддержке, моя цель - сделать так, чтобы моим существующим фанатам было как можно проще рассказывать о том, почему они находят мою игру привлекательной. Для этого я создам ссылку, открывающую веб-страницу. На этой странице будет скриншот, показывающий, что происходило в момент смерти игрока в Swordchuck Challenge, и краткое описание происходящего, которое, будем надеяться, побудит новых игроков загрузить мою игру и начать играть:
Хостинг Firebase - один из моих любимых инструментов в Ящике инструментов Firebase. На первый взгляд это довольно скромно: всего лишь небольшой простой хостинг-провайдер с отличным уровнем бесплатного пользования, но без каких-либо генераторов сайтов. С точки зрения философии и функциональности это такая же часть Firebase, как и любой другой продукт. Это безопасно: поддержка SSL из коробки без дополнительной оплаты, это быстро: глобальный CDN гарантирует, что необходимый контент всегда находится рядом с пользователем, и он расширяемый: поддержка динамического контента через Функции Firebase Cloud и Облако Google Запустить".
Для начала я сначала установлю Firebase CLI. Используйте firebase login для настройки моей учетной записи, затем введите firebase init в каталоге, в котором я хочу хранить контент своего веб-сайта.
Проходя через этот процесс, я убеждаюсь, что работаю в проекте swordchuck-challenge вместе с остальной частью моей игры:
Когда я решаю, какие функции использовать, безопаснее всего просто выбрать Хостинг. Я также хотел бы сохранить свои правила Storage в исходном репозитории, но если я это сделаю, я хочу убедиться, что копирую файл правил из консоли Firebase, прежде чем набирать firebase deploy . В противном случае я могу потерять все, что ввел в консоль!
Чтобы протестировать свои веб-страницы локально, я могу ввести firebase serve:
Перейдя к localhost:5000, я могу увидеть страницу шаблона по умолчанию:
Точно так же, если я наберу firebase deploy, я могу опубликовать эту страницу в Интернете:
После развертывания https://swordchuck-challenge.firebaseapp.com будет соответствовать тому, что я видел на localhost. Обратите внимание, что Firebase также предоставляет разработчикам web.app доменов. Если вы перейдете на вкладку «Хостинг» в консоли Firebase, вы увидите этот URL:
Я оставлю index.html как есть. Может мне потом закинуть крутой лендинг с инвайт-ссылкой на бету!
Что я хочу сделать сейчас, так это сопоставить путь /scores/<some_user_id> с последним общим счетом <some_user_id>. Мой первый шаг - клонировать index.html в score.html. Я также создаю js папку и создаю файл score.js, который сейчас заполню.
Затем, поскольку в наши дни иметь строку запроса - это супер не круто, я собираюсь создать «переписать», чтобы перенаправить /scores/* на score.html. Я открою firebase.json (он был создан везде, где вы firebase init) и поищу "hosting": {. Затем я ищу раздел под названием "rewrites": [ или при необходимости создаю его. Я обновлю это записью, которая выглядит так:
По сути, это означает, что любой URL-адрес, начинающийся с /scores/<some_user_id>, будет отображаться на scores.html страницу, которую я только что создал. Теперь весь раздел хостинга для моего проекта выглядит так:
Теперь я внедряю score.html. Сначала нахожу блок <style media=”screen”> и добавляю:
Это просто делает так, что абсолютно огромные скриншоты, загруженные в Cloud Storage, помещаются в маленькую квадратную штуку, отображаемую в центре экрана. В будущем я могу использовать это расширение для изменения размера изображения с целью экономии трафика и предоставления изображения, которое лучше соответствует размеру экрана пользователя.
Затем я нахожу <div id=”message”> и заменяю его некоторыми значениями-заполнителями, которые нужно заполнить с помощью JavaScript:
Я также удалю <p id=”load”>Firebase SDK Loading…</p> и после этого раздел <script>.
Затем я нахожу область, помеченную: <! — include only the Firebase features as you need -->, и заменяю ее на:
Поскольку мне нужен только Firebase Storage SDK для получения изображения и метаданных.
Теперь проницательные среди вас могут увидеть путь /__/firebase/ и задуматься о том, что происходит. Это уникальная функция хостинга Firebase, которая не только упрощает обращение к необходимым библиотекам Firebase, но и автоматически настраивает клиентский SDK.
Я также найду здесь минутку, чтобы сослаться на только что написанный мной score.js файл, добавив:
после:
Пришло время отобразить счет игрока. Откройте score.js и начните создавать забавное выражение с немедленным вызовом функции (IFEE), чтобы я мог использовать async/await, поскольку обещания таковы, что ES2015:
Я начинаю с захвата всех узлов, которые собираюсь обновить в остальной части функции.
Затем я получаю ссылку на хранилище firebase:
Затем я вытаскиваю идентификатор пользователя из пути:
Теперь я хочу сделать снимок экрана с момента смерти игрока. Если вы помните из моего предыдущего поста, я сохранил это в finalScores/<user_id>/finalScore.png, поэтому я беру ссылку на это место в Firebase Cloud Storage:
Теперь, когда у меня есть ссылка, мне нужно получить файл, чтобы отобразить его на моей странице. Я воспользуюсь getDownloadUrl, чтобы получить общедоступный URL-адрес, который я могу включить в свой тег <img>, и соответствующим образом обновлю элемент DOM:
Наконец, картинка стоит тысячи слов. Но важные слова для этой картины:
- это имя игрока (прямо сейчас 4AJZHCvV3vX6hvkEyvjxbreYJKZ2, пока я не добавлю имена пользователей), тот факт, что он Умер от удара мечом, и что у них не было никаких очков в течение всех 5 секунд, когда они были живы. В моем предыдущем посте я поместил эту информацию в Пользовательские метаданные моего справочника по облачному хранилищу. Поэтому я могу получить его с помощью:
Собирая все вместе, мой score.js выглядит так:
После внесения всех этих изменений я убеждаюсь, что firebase serve запущен. Затем с помощью консоли Cloud Storage найдите идентификатор пользователя, отправленный через Unity:
и введите это в адресной строке локального экземпляра Chrome как http://localhost:5000/scores/4AJZHCvV3vX6hvkEyvjxbreYJKZ2:
Если меня устраивает, я могу firebase deploy открыть новую страницу с результатами.
Обмен результатами
Последний фрагмент этой головоломки - облегчить обмен ссылками из моей игры на Unity. Начну с написания UserLinkManager:
Я в основном беру адрес swordchuck-challenge.web.app с хостинга Firebase и вставляю его в формат строки запроса, чтобы получить оценку. Сохранение его настраиваемости в редакторе с [SerializeField] упрощает временное тестирование на localhost или создание промежуточной среды, если я когда-нибудь почувствую в этом необходимость.
Всякий раз, когда я хочу поделиться своим счетом в моей игре, я могу позвонить GetUserLink(), чтобы получить текстовую ссылку для копирования. В моем быстром прототипе я просто помещаю это в поле ввода, чтобы игрок мог скопировать из своего буфера обмена:
Следующие шаги
Надеюсь, вам понравился этот краткий обзор моего регулярного содержания C # и C ++. Firebase, как правило, отлично подходит для обеспечения присутствия облака для вашей игры без необходимости действительно выходить из контекста вашего игрового движка. Я думаю, что действительно полезно время от времени отступать и помнить, что вы все равно можете улучшить свой пользовательский опыт за пределами основной игровой логики.
Теперь, когда у вас есть некоторое присутствие в Интернете, вы можете также изучить Динамические ссылки Firebase. Вы можете не только сократить этот гигантский URL-адрес, но и прикрепить к ссылке еще больше состояний. Вы даже можете иметь ссылки на глубину своей игры, возвращаясь к этой веб-странице, которую вы здесь создали!
Теперь было бы отличное время изучить другие сторонние API-интерфейсы, которые помогут навести порядок в совместном использовании. Вы не только сможете избежать хакерского копирования / вставки URL-адреса, как я сделал здесь, но вы также можете использовать многие службы аутентификации социальных сетей в качестве провайдеров входа в систему Firebase Authentication. Это означает, что вам больше не нужно создавать анонимные учетные записи, как я делал до сих пор, и вы можете начать сохранять пользовательские данные на разных устройствах!
Ресурсы
Вот некоторые дополнительные ресурсы, которые могут быть вам полезны:
