Программная смена иконки игры на Construct 3 во вкладке браузера
Добрый день!
Меня зовут Руслан.
С 2016 года делаю игры в редакторе Construct 3.
Когда у нас в работе попадаются достаточно сложные проекты, которые потом нужно долго поддерживать, мы используем 2 отдельных папки на сервере.
1. Тестовая — в неё мы постоянно загружаем обновлённые версии проекта, чтобы посмотреть, всё ли работает как надо.
2. Боевая — в неё заливаем уже более менее-протестированные версии, которые не стыдно показать заказчику.
На днях мой коллега попросил сделать разные favicon для тестовой и боевой версий игры, чтобы он мог визуально различать их в своей куче вкладок браузера.
Favicon – это маленькие иконки сайта, которые выводятся во вкладке браузера и в некоторых других местах типа Избранного в браузере.
Иконка сайта или игры.
Поначалу я ответил, что это будет слишком морочно — при каждой заливке боевой версии менять вручную все иконки в проекте (те, которые в разделе Icons & screenshots).
Иконки в проекте.
При этом у нас в последнем проекте 6 отдельных блоков со своими иконками. В общем, «да ну нафиг».
Но вчера я вспомнил про нашего китайского друга — нейросеть DeepSeek, которая часто помогает накодить что-нибудь эдакое.
И он снова не подвёл. Подсказал, как программно менять эту иконку в проекте.
1. Сначала рисуем иконку в нужном размере
ДипСик говорит, что размеры бывают нужны разные, но вроде максимальный-оптимальный для нашей цели — 64х64 px.
Чтобы не мудрить, я просто перекрасил в другой цвет основную иконку проекта прямо в редакторе анимаций C3.
Перекрашенная иконка.
2. Сохраняем картинку в файл
Я сохранил картинку как icontest.webp
Название и расширение этой картинки может быть почти любое, на ваш вкус.
3. Закидываем картинку к другим файлам проекта
Папка с файлами проекта в Construct 3.
4. Задаём переменные для переключения иконки
У меня это строковые переменные:
Управляющие переменные.
- modeTest — хранит тип версии.
”test” – тестовая версия *,
”” - боевая версия.
* Использую именно этот вариант (”test” и пустую строку), поскольку они у нас завязаны на имена таблиц в базах данных.
Содержимое этой переменной я меняю вручную с ”test” на ””, перед компиляцией и заливкой боевой версии.
- modeTestIcon — триггер, показывающий, переключилась ли уже иконка (чтобы не переключать иконку при каждом переходе между макетами проекта).
”off” – иконка ещё не менялась,
”on” – иконка уже сменилась.
5. Добавляем событие переключения иконки
И теперь самое главное — сам скрипт переключения иконки.
Использование скрипта.
Скрипт отдельно:
var link = document.querySelector("link[rel~='icon']") || document.createElement('link');
link.rel = 'icon';
link.href = 'icontest.webp'; // путь к иконке тестовой версии игры
document.head.appendChild(link);
В этом событии мы проверяем:
- Если иконка ещё не переключалась modeTestIcon = ”off”,
- И если это тестовая версия игры modeTest = ”test”.
То задаём проекту иконку вот с таким именем icontest.webp. **
** Если у вас иконка будет под другим именем, не забудьте поменять ссылку на неё в скрипте.
И затем отмечаем в триггере modeTestIcon что иконка уже поменялась и не нужно делать этого снова.
6. Заливаем всё на сервер и тестируем.
Если всё сделано верно, то теперь мы можем быстро понять, где у нас вкладка браузера с тестовой версией, а где — с боевой.
Разные версии игры.
На сим откланиваюсь. Скоро вернусь с очередной, скучной, но полезной фичей для Construct 3 :)