Studio / ROBLOX
Пропорции карточки в Roblox Studio: настройка UIAspectRatioConstraint
Сохраняем форму нужного элемента, не связывая квадратную иконку с длинным описанием. Пошагово выбираем объект, задаём отношение сторон и проверяем узкий экран, layout и перевод.
Определи, что именно растягивается #
Начни с одного элемента: например, квадратная картинка предмета становится широкой, когда меняется размер панели. Отдельно проверь, меняется ли форма самой области картинки или только размещение остальных элементов карточки. Это разные задачи. Сохранить пропорции означает удержать отношение ширины к высоте, а не оставить одинаковое число пикселей на каждом устройстве.
Сформулируй ожидаемый результат: «Область иконки остаётся квадратной при изменении родителя». Он проверяемый и не обещает сразу исправить всё меню. В статье используется предложенная учебная карточка; действующие игры и реальные размеры в Studio для неё не измерялись.
Выбери элемент, которому нужна пропорция #
Для упражнения раздели ItemCard на область IconArea, название Title и описание Description. Иконке может требоваться квадрат, а тексту — пространство для нескольких строк. Если поставить квадратное ограничение на всю карточку, длинное описание станет частью другого решения: ему всё равно нужно поместиться в заданную форму.
Начни с ограниченной задачи для IconArea. Названия здесь наши учебные, Roblox не создаёт такую структуру автоматически. Сделай отдельный Frame или используй подходящий GuiObject в своём прототипе. Если внутри есть ImageLabel, проверь его размещение отдельно: квадратный внешний контейнер сам по себе не описывает настройки всех дочерних картинок.
Добавь constraint под выбранный объект #
В Explorer найди точный элемент, форму которого хочешь удерживать. Добавь UIAspectRatioConstraint как его дочерний объект. В справке Roblox именно родительский GuiObject является целью этого constraint. Затем выбери сам constraint и найди свойство AspectRatio.
Перед дальнейшей настройкой сверь иерархию: ItemCard → IconArea → UIAspectRatioConstraint, если ограничивается IconArea. Объект под общим контейнером ItemCard будет относиться к общей карточке. Похожее имя в другой панели легко спутать с нужным элементом, поэтому проверяй родителя, а не только название свойства.
Открыть изображение крупнее ↗Задай отношение сторон и прочитай его правильно #
AspectRatio описывает ширину, делённую на высоту. Для квадратной области поставь 1. Для области вдвое шире высоты значение равно 2, а для области вдвое уже высоты — 0.5. Вводится число отношения, а не строка «1:1» и не количество пикселей.
Начни с одного отношения и не меняй его при каждой смене размера экрана, если форма должна сохраняться. Для квадратного изображения используй свой квадратный ресурс и наблюдай, не выглядит ли он растянутым. Наш рисунок с тремя прямоугольниками объясняет отношения; это схема, а не снимок измеренного интерфейса.
Открыть изображение крупнее ↗Раздели форму и абсолютный размер #
Квадраты 120×120 и 180×180 отличаются размером, но оба дают отношение 1. Прямоугольник 240×120 даёт 2, а 120×240 — 0.5. Эти числа выбраны для арифметического упражнения, не получены из нашего проекта. Они помогают заметить ошибку, когда ожидаешь квадрат, а сравниваешь только ширину.
Если форма правильная, но карточка слишком большая, не меняй отношение на случайное число ради уменьшения. Сначала посмотри на размер контейнера и средства ограничения размеров. UISizeConstraint и UIAspectRatioConstraint решают связанные, но разные задачи: границы размера и пропорцию. Совместный результат нужно проверять в своей раскладке.
| Учебные размеры | Отношение ширины к высоте |
|---|---|
| 120 × 120 | 1 |
| 180 × 180 | 1 |
| 240 × 120 | 2 |
| 120 × 240 | 0.5 |
Повтори на узком и широком родителе #
Сохрани выбранный предмет и текст, затем сравни две доступные области: узкую и широкую. Запиши размер родителя, наблюдаемые ширину и высоту цели и заданное отношение. Для сравнения экрана устройства можно использовать отдельную инструкцию о Device Simulator; не смешивай смену профиля с заменой содержимого карточки.
Смотри не только на форму, но и на положение: иконка может оставаться квадратной и при этом мешать выходу или выходить за доступную область. Такие наблюдения не опровергают арифметику отношения; они показывают другую проблему раскладки. После исправления повтори ту же пару размеров и тот же предмет.
Учитывай layout и остальные ограничения #
Если элемент участвует в UIListLayout, нельзя оценивать его размер только по настройке списка. Документация предупреждает, что UIAspectRatioConstraint управляет размером поверх layout. Зафиксируй наличие layout и других constraints до того, как менять несколько свойств одновременно.
Для поиска причины удобно сравнить изолированный учебный элемент с элементом внутри твоего списка. Делай это в отдельном прототипе, сохранив исходную структуру, и записывай одну изменённую настройку. Не удаляй layout из рабочего меню только потому, что отдельная картинка выглядела правильно. Удачная форма вне списка ещё не проверяет размещение внутри него.
Проверь длинное название и перевод отдельно #
Подставь короткое название, затем длинную строку, которую реально ожидаешь в интерфейсе. Проверь название, описание и доступность действия. Соотношение сторон не выбирает размер шрифта и не обещает, что любой перевод поместится. В справке UITextSizeConstraint и автоматическое изменение размера рассматриваются отдельно от пропорции.
Если тексту не хватает места, сначала реши, что должен видеть игрок: полное описание, несколько строк или отдельную подробную панель. Не превращай текст в нечитаемую подпись ради сохранения внешнего квадрата. У нашей учебной структуры квадрат относится к иконке, поэтому форму изображения и место для текста можно обсуждать раздельно.
Проверь действие, а не только красивый снимок #
Открой карточку, выбери предмет и закрой панель предусмотренным способом. Повтори после изменения размера. Визуально правильная геометрия не подтверждает обработчик кнопки, состояние выбора и доступный touch-путь. Эти проверки относятся к поведению интерфейса.
Вымышленная ситуация: иконка стала квадратной, но выход перекрыт соседним текстом и не нажимается. Записывай обе части результата: пропорция исправлена, маршрут выхода требует проверки. Не объявляй всю карточку готовой по одному снимку. Пример в статье не создаёт настоящую логику выбора или закрытия.
Сохрани понятную запись результата #
Запиши цель constraint, его родителя, AspectRatio, размеры доступной области, содержимое карточки и наличие layout. Добавь ожидание и наблюдение для каждой раскладки. Если проверка пока только запланирована, так и отметь: схема и вычисление отношения не равны запуску Studio.
Главное условие готовности нашего упражнения — сохранённая форма нужного элемента вместе с читаемым текстом и доступным действием в выбранных условиях. Это не гарантия одинакового физического размера, всех устройств и всех переводов. Оригинальные иллюстрации в статье помогают разобрать пропорцию и иерархию; измерений реальных игр они не показывают.
| Проверка | Что записать |
|---|---|
| Цель constraint | Точный объект и его родителя |
| Layout | Участие списка и других ограничений |
| Длинный перевод | Ту же строку на двух размерах |
| Действие | Путь выбора и выхода |
Первоисточники
Roblox Creator Hub — Size modifiers and constraintsRoblox Creator Hub — UIAspectRatioConstraint
