Go Rin Showdown, день 11: путеводные звёзды

Расскажем, как мы облегчаем работу дизайнерам в Unity. Пост с картинками и кодом!

Go Rin Showdown, день 11: путеводные звёзды

Итак, перед нами встала небольшая проблема: наш персонаж перемещается по точкам, которые в игре никак не отображаются. Таких точек на уровне много и названы они примерно одинаково. Если в редакторе их тоже не визуализировать, то поиск этих точек на уровне может (в долгосрочной перспективе) отнимать довольно много времени и просто доставлять неудобства.

Кроме того, эти точки должны быть правильно связаны между собой. Проверить правильность всех связей на уровне — задача довольно трудоёмкая и плохо автоматизируется. Приходится вручную выбирать точку и проверять каждую из 4-х ссылок, переходя по ней. По имени объекта тоже сходу не определишь, где он находится: пришлось бы придумывать понятную систему именования вершин в графе.

Как мы решили эту проблему

На помощь нам пришли иконки и gizmos.

Расположение невидимых ассетов визуализируется буквально в два клика. Достаточно задать в префабе иконку. Для этого в Inspector'е есть выпадающее меню рядом с названием объекта:

​Можно отображать точку, ромб, имя объекта, или выбрать иконку из ассетов. Цвета помогут отличить тип объектов в будущем, например, когда добавим маршруты патрулирования для AI.<br />
​Можно отображать точку, ромб, имя объекта, или выбрать иконку из ассетов. Цвета помогут отличить тип объектов в будущем, например, когда добавим маршруты патрулирования для AI.

Но мы хотели пойти немного дальше и отрисовывать связи между точками перемещения. Для этого идеально подходят так называемые "gizmo". К ним же относятся и стрелки, за которые мы перетаскиваем объекты в окне редактора, и родственные им инструменты (поворот, размер). С помощью функционала Unity можно рисовать линии, кубы, сферы, и многое другое. Полный список методов можно найти в документации Unity.

В нашем случае для отображения связей между точками мы рисуем линии разных цветов (каждый цвет соответствует одному из направлений) от точки до точки когда объект выделен, и белые короткие (чтобы они не перекрывали цветные линии) когда объект не выделен. В результате можно удобно выделять точки передвижения и на глаз определять, правильно ли они соединены с другими.

Этот небольшой скрипт сильно упрощает дизайн уровня и определённо стоил того чтобы не полениться и потратить на него несколько минут:

using System.Collections.Generic; using UnityEngine; using static WallJumpPoint; [ExecuteInEditMode] [RequireComponent(typeof(WallJumpPoint))] public class WallJumpPointGizmos : MonoBehaviour { [SerializeField] private float defaultDrawLength = 0.5f; private static Color defaultDrawColor = Color.white; private Dictionary<WallJumpDirection, Color> selectedDrawColors = new Dictionary<WallJumpDirection, Color> { { WallJumpDirection.Up, Color.red }, { WallJumpDirection.Left, Color.green }, { WallJumpDirection.Right, Color.blue }, { WallJumpDirection.Down, Color.yellow } }; private WallJumpPoint jumpPoint; void Update() { jumpPoint = GetComponent<WallJumpPoint>(); if (jumpPoint == null) { enabled = false; } } void OnDrawGizmos() { Gizmos.color = defaultDrawColor; WallJumpPoint adjacent; foreach (var item in selectedDrawColors.Keys) { adjacent = jumpPoint.GetNextPoint(item); if (adjacent == null) { continue; } Vector3 drawVector = (adjacent.transform.position - transform.position).normalized * defaultDrawLength; Gizmos.DrawLine(transform.position, transform.position + drawVector); } Gizmos.color = Color.green; Gizmos.DrawLine(transform.position, transform.position + transform.forward); } void OnDrawGizmosSelected() { WallJumpPoint adjacent; foreach (var item in selectedDrawColors) { adjacent = jumpPoint.GetNextPoint(item.Key); if (adjacent == null) { continue; } Gizmos.color = item.Value; Gizmos.DrawLine(transform.position, adjacent.transform.position); } } }

В следующих постах покажем плейтесты обновлённого геймплея, ассеты и обновления графического стиля и документации.

Команда "Mad not Crazy"

  • Максименко Денис: программист, гейм-дизайнер
  • Рома: дизайнер по звуку
  • r1gm4r013: музыкант
  • MuteYourBrains: концепт-художник
  • Сергей Струлев: левел-дизайнер

Свитки разработки

44
1 комментарий

У меня была проблема для разметки игровой сцены координатами объектов. Правда, в чистом 2D. 

В конце я решил так - что можно строить прототип сцены в Figma, Inkscape, Adobe Illustrator - и экспортировать в SVG. А уже SVG читался как текстовый файл с координатами (или транслировался в JSON-файл с координатами объектов).  В SVG объекты можно именовать, в Illustrator и Figma тоже - и при экспорте получается вполне читабельный файл, который можно легко и распарсить, и перевести в JSON-файл с координатами

1