ROBLOX — Работа с изображениями

Автор: | 2 января, 2024
Поделиться...

Видя очередное творение на DevForum, решил дописать… Вот что получилось.

Что такое 9-slice?

9-slice — это один из способов масштабирования картинки в Roblox. Он разделяет картинку на 9 частей.

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

ЧастьМасштабирование
:one: :three: :seven: :nine: (углы)никак
:two: :eight:горизонтально
:four: :six:вертикально
:five: (центр)горизонтально + вертикально

Чтобы включить этот способ, нужно изменить свойство ScaleType у ImageLabel или ImageButton на Slice. После этого рядом появится свойство SliceCenter, которое, как раз, и делит картинку на части. Это свойство использует тип данных Rect, который обозначает прямоугольник на двумерной поверхности. Этим прямоугольником является центр картинки (5-ая часть). Но ты можешь не брать это в голову, так как в конце я расскажу про более легкий и интуитивно-понятный способ.

Для чего нужен 9-slice?

С помощью этого способа масштабирования можно менять размер изображения не нарушая форму краев (1, 3, 7, 9 части не меняют размер).
Вот к примеру картинка с дефолтным типом масштабирования (нажми на картинки):


А вот эта же картинка с типом масштабирования 9-slice:

Screenshot_4

Редактор 9-slice

Недавно был сделан редактор 9-slice, в котором можно легко и визуально отредактировать SliceCenter. Чтобы открыть его, нужно нажать на значение свойства SliceCenter, а затем на появившиеся радом 3 точки.
Screenshot_1
После этого у тебя должен открыться сам редактор.
Screenshot_2
В нем можно настроить значение с помощью ползунков, или, для большей точности, ввести значения в разделе Offsets справа.
Вот и получается то, о чем я говорил в самом начале:
Screenshot_3

Заключение

Надеюсь тебе помог этот туториал и ты понял, как использовать этот способ масштабирования. Главное — запомнить, в каких направлениях изменяется каждая часть (таблица выше).2Ответить

GAVsi115

Хвалить не буду.
Не плохо.

Но почему все считают, что если освещают применение изображений нужно поговорить только о нарезке Slice?

Начнём с начала!
Присутствует несколько вариантов размещения фонового изображения на метке или кнопке. Определяются они ключевым параметром: ScaleType — метод растяжения.

Возьмём базовое (в примере оно квадратное со стороной 80 единиц) изображение
image
и поместим его в прямоугольную метку и будем менять ScaleType:

Crop — растянуть пропорционально изображение по меньшей стороне до заполнения всего пространства. Да, бывают случаи, когда нам нужно корректная пропорция изображения.

Fit — поместить изображение внутрь. В данном случае будет растянуто по минимуму, чтобы изображение полностью поместилось в заданную область.

Stretch — растянуть для заполнения. Вариант при котором не будут соблюдаться пропорции, но будет полностью видно изображение.

Tile — замостить изображением. Это вариант, при котором заполняется всё пространство копиями исходного изображения с заданными размерами. Поэтому при выборе данного варианта появляется ещё параметр TileSize в котором и задаются данные размеры.

Добрались до Slice и… сделаем уже достойную рамку!

  • Slice — нарезка (рамки). Вот мы и подошли к данному параметру. По умолчанию мы получим такую картинку:

Первое, на что стоит обратить внимание, это параметр SliceScale — скалирование нарезки. Задаёт первичный размер нарезки. Для примера поставим 3:

Как видим, наше изображение увеличилось в 5 раз.
Теперь нарежем его. Если нажать в новый параметр — строку SliceCenter, то увидим там кнопку с многоточием:

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

Вернём назад значение SliceScale = 1.

Это пример того, как можно не верно нарезать. Исправим наш “косяк” — сместим границы к центральному пятну…

Как видим — совсем другое дело! Остаётся установить BackgoundTransparency = 1 для нашего фрейма и изображения и получим уже почти прелесть:

Но, нам не хватает одной детали — фона в центре. Для этого поместим ещё одно изображение во фрейм. Но поместим его под наше изображение, т.е. для него зададим ZIndex = 1, а для рамки ZIndex = 2. Ну и ещё немного поколдуем?

AnchorPoint = 0.5,0.5 — привязываем центром нашего фона

Position = (0.5,0,0.5,0) — привязываем по центру нашего фрейма

Size = (0.92,0,0.92,0) — задаём размер, чтобы наша фоновая картинка была чуть больше центральной части рамки.

Image = нашей картинке для фона (что с ней сделать, решайте сами исходя из вариантов описанных ранее — например для бесшовной текстуры: Tile)
И в результате наших трудов мы получаем вот такой результат:

Думаю что он достоин похвалы. :sunglasses:


Поделиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *