Hellfim
Slasty: Candy Tower

Devlog 1. Создание браузерной версии

Добавлен , опубликован
Это небольшая запись в дневник разработки без каких-то глубоких технических подробностей.
Информацию по актуальной версии игры вы всегда можете получить на главной странице проекта
Так как игра разрабатывается на движке Unity, то встречи с какими-то серьёзными сложностями при создании браузерной версии я не ожидал - ну, максимум нужно будет временно отключить сервисы авторизации, оплаты, рекламы, да пару настроек где-то подкрутить. Однако, реальность оказалась чуть более суровой…
Мне уже давно хотелось поковырять новомодный UI Toolkit в Unity, и вот, в начале разработки игры именно этим я и решил этим заняться. В UI Toolkit’e интерфейс собирается не из компонентов и игровых объектов, как это привычно каждому Unity-разработчику, а из файлов разметки - по сути очень похоже на вёрстку простейших сайтов-визиток и страничек в интернете. Какое-то базовое представление у меня, конечно есть, но ранее как-то особо не приходилось с этим сталкиваться, и я с головой погрузился в новый интересный мир.
В целом, каких-то особых сложностей в изучении технологии действительно не возникло, но оказалось, что «новомодный» UI Toolkit, доступный для использования уже 2 года как - всё ещё неимоверно сырой (количество зарепорченных багов лично мной составляет около 30 штук), поэтому разработка интерфейсной части игры превратилась в какую-то постоянную борьбу с ветряными мельницами. Хотя, стоит отметить, что с каждой новой версией UI Toolkit прямо на глазах становился всё лучше удобнее. В итоге, в процессе разработки мы переехали на альфа-версию Unity 2023, которую я обновлял минимум один раза в месяц, чтобы быть на острие технологий! Но, все возникающие сложности героически преодолевались, разработка шла полным ходом, а проект успешно собирался и под Android, и под iOS.
NB: Нормальные люди при разработке игры, фиксируют версию движка, и обновляется только при исправлении какой-то ошибки или появление долгожданной фичи, затрагивающей разрабатываемую игру.
Дойдя до этапа с готовыми к показу версиями для GooglePlay/AppStore я подумал, что можно попробовать собрать веб-версию на HTML5. Да и движок, казалось бы, позволяет - вроде бы, надо просто нажать Switch Platform, потом Build, и радоваться работающей игре на кросс-платформенном Unity.
И если свичнуть платформу и собрать билд я ещё смог (отключив некоторые чисто мобильные сервисы), то вот порадоваться работающей игре не получилось - она вылетала сразу после прохождения первого этапа в туторе. Это меня несколько смутило, ведь в игре не используется какого-то нестандартного кода, который мог бы приводить к такому поведению. Пока я пытался разобраться в причинах происходящего, мой мозг ехидно напоминал, что использование любой нестабильной версии чего-либо в готовом к релизу проекте (например, альфа-версии игрового движка) - сомнительная затея. Собственно говоря, так и оказалось - в процессе дебага я пришёл к тому, что с моей стороны действительно нет косяков, а падает именно UI Toolkit в своих внутренностях при работе с веб-версией.
Ну, падает и падает. Мне-то билд на HTML5 нужен! Поискав информацию о вышеупомянутой ошибке в интернете, я пришёл к тому, что ничего вменяемого сделать нельзя, и ошибка была привнесена в код Unity с какой-то из версий 2023. Жёстко откатываться до версии без бага - не очень хотелось, всё-таки когда-нибудь юнитехи исправят баг, и можно будет продолжить пользоваться классными фичами из Unity2023.
Решил, что для веб-версий проекта буду использовать Unity2022 (в ней нет бага), а для мобилок - Unity2023. Немного пошаманив, удалось всё совместить. Сейчас при переключении версии просто происходит реимпорт проекта, и отваливается одна из нестандартных рендер-фичей, которая исправляется вручную за 1 минуту. Но, думаю, что и авто-починку этой рендер-фичи я чуть позже тоже добавлю.
В общем, моё первое знакомство с HTML5 вышло несколько жестковатым, но в целом, все проблемы удалось разрулить, и теперь занимаюсь интеграцией SDK от Яндекса, чтоб выложить игру на Яндекс.Игры. Возможно, в следующем дневнике разработки даже напишу об этом!
28 дек 2023
  • Размещен: 28.12.2023 10:06:05
  • Создан: 28.12.2023 10:06:05
  • Обновлен: 28.12.2023 10:06:05
148
`
ОЖИДАНИЕ РЕКЛАМЫ...
0
29
  • Комментарий официального представителя Администрации сайта
    • 4 месяца назад
    0
    Я так понимаю, что при компиляции там будет не только слой canvas но и некий html?
    0
    30
    4 месяца назад
    0
    По итогу билда создаётся 2 папки (Build и StreamingAssets), а также файл index.html со следующим содержимым.
    index.html 
    <!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity Web Player | Slasty</title>
  </head>
  <body style="text-align: center; padding: 0; border: 0; margin: 0;">
    <canvas id="unity-canvas" width=390 height=844 tabindex="-1" style="width: 390px; height: 844px; background: #FFFFFF"></canvas>
    <script src="Build/Test.loader.js"></script>
    <script>
      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);

        var canvas = document.querySelector("#unity-canvas");
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        canvas.style.position = "fixed";

        document.body.style.textAlign = "left";
      }

      createUnityInstance(document.querySelector("#unity-canvas"), {
        arguments: [],
        dataUrl: "Build/Test.data.gz",
        frameworkUrl: "Build/Test.framework.js.gz",
        codeUrl: "Build/Test.wasm.gz",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "FairGoose",
        productName: "Slasty",
        productVersion: "0.5.5",
        // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
        // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
      });
    </script>
  </body>
</html>
    То есть, как я понимаю, слой канвас тут только один, и в нём с помощью js рисуется игра.
    0
    37
  • Комментарий официального представителя Администрации сайта
    • 4 месяца назад
    0
    Обожаю такие тесты типа айфон и андроид. На винду с тачем, смарт тиви, хром ос и другие ос насрать) так держать! 👍
    0
    30
    4 месяца назад
    0
    ScorpioT1000:
    Обожаю такие тесты типа айфон и андроид. На винду с тачем, смарт тиви, хром ос и другие ос насрать) так держать! 👍
    На самом деле я уже давно неиронично хочу пильнуть что-нибудь для смарт-тв. Тут проект вроде простой, поэтому можно портировать везде куда получится (в основном, полагаю, без коммерческого выхлопа). Так что, когда-нибудь в следующем году можете и на вашей микроволновке ожидать!
    1
    27
    4 месяца назад
    1
    Hellfim, о, мы тоже пойдем этим путём скоро) Планируем выкатить веббилд на яндекс, вк, itch и пару мелких)
    Чтобы оставить комментарий, пожалуйста, войдите на сайт.