Видя очередное творение на DevForum, решил дописать… Вот что получилось.
Что такое 9-slice?
9-slice — это один из способов масштабирования картинки в Roblox. Он разделяет картинку на 9 частей.
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/936c2198172b1a46310129efda7a5d4b6866cc69_2_375x375.png)
Каждая часть картинки масштабируется в разных направлениях. В таблице ниже показано, каким образом масштабируется каждая часть.
Часть | Масштабирование |
---|---|
![]() ![]() ![]() ![]() | никак |
![]() ![]() | горизонтально |
![]() ![]() | вертикально |
![]() | горизонтально + вертикально |
Чтобы включить этот способ, нужно изменить свойство ScaleType у ImageLabel или ImageButton на Slice. После этого рядом появится свойство SliceCenter, которое, как раз, и делит картинку на части. Это свойство использует тип данных Rect, который обозначает прямоугольник на двумерной поверхности. Этим прямоугольником является центр картинки (5-ая часть). Но ты можешь не брать это в голову, так как в конце я расскажу про более легкий и интуитивно-понятный способ.
Для чего нужен 9-slice?
С помощью этого способа масштабирования можно менять размер изображения не нарушая форму краев (1, 3, 7, 9 части не меняют размер).
Вот к примеру картинка с дефолтным типом масштабирования (нажми на картинки):
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/c4de1cd6fdf82881b536f52abc4305e7abd73179-1024x341.png)
А вот эта же картинка с типом масштабирования 9-slice:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/b8b8e3086dd7da6ef8a7e97da3a2579144c375e3-1024x341.png)
![Screenshot_4](https://doy2mn9upadnk.cloudfront.net/uploads/default/original/4X/7/9/7/79789b778a4b7d3f0451b581ecfddb909c51f05d.png)
Редактор 9-slice
Недавно был сделан редактор 9-slice, в котором можно легко и визуально отредактировать SliceCenter. Чтобы открыть его, нужно нажать на значение свойства SliceCenter, а затем на появившиеся радом 3 точки.
После этого у тебя должен открыться сам редактор.
В нем можно настроить значение с помощью ползунков, или, для большей точности, ввести значения в разделе Offsets справа.
Вот и получается то, о чем я говорил в самом начале:
Заключение
Надеюсь тебе помог этот туториал и ты понял, как использовать этот способ масштабирования. Главное — запомнить, в каких направлениях изменяется каждая часть (таблица выше).2Ответить
![](https://doy2mn9upadnk.cloudfront.net/user_avatar/devforum.roblox.com/gavsi115/90/650385_2.png)
Хвалить не буду.
Не плохо.
Но почему все считают, что если освещают применение изображений нужно поговорить только о нарезке Slice?
Начнём с начала!
Присутствует несколько вариантов размещения фонового изображения на метке или кнопке. Определяются они ключевым параметром: ScaleType — метод растяжения.
Возьмём базовое (в примере оно квадратное со стороной 80 единиц) изображение
и поместим его в прямоугольную метку и будем менять ScaleType:
Crop — растянуть пропорционально изображение по меньшей стороне до заполнения всего пространства. Да, бывают случаи, когда нам нужно корректная пропорция изображения.
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/a4bd1a7e57af799470a22e3ff22c7624f07e2bf4-1024x600.jpg)
Fit — поместить изображение внутрь. В данном случае будет растянуто по минимуму, чтобы изображение полностью поместилось в заданную область.
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/d3e9acdf36f0167ce2d259773e78f19c348ebf83.jpg)
Stretch — растянуть для заполнения. Вариант при котором не будут соблюдаться пропорции, но будет полностью видно изображение.
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/47a5079d47c6292e01520670099d275061767e63.jpg)
Tile — замостить изображением. Это вариант, при котором заполняется всё пространство копиями исходного изображения с заданными размерами. Поэтому при выборе данного варианта появляется ещё параметр TileSize в котором и задаются данные размеры.
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/55239f09444046b85e51dd588cec558316cae4bc-1024x495.png)
Добрались до Slice и… сделаем уже достойную рамку!
- Slice — нарезка (рамки). Вот мы и подошли к данному параметру. По умолчанию мы получим такую картинку:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/eac473f2d23f89c0c2685cddb07b364bc593971f-1024x503.png)
Первое, на что стоит обратить внимание, это параметр SliceScale — скалирование нарезки. Задаёт первичный размер нарезки. Для примера поставим 3:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/8a39a3a26da8f2dacdb5bb01fc3db74114654d41-1024x500.jpg)
Как видим, наше изображение увеличилось в 5 раз.
Теперь нарежем его. Если нажать в новый параметр — строку SliceCenter, то увидим там кнопку с многоточием:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/492e652ccd9e47d66ebcdcf2b23ab06e9a4ab259.png)
При её активации, у нас появится вариант (редактор) для визуальной нарезки (хотя я изначально создаю изображение в котором знаю как его ширину и высоту, так и размеры для углов). Соответственно, потянув за красные линии мы можем произвести нарезку для неизменяемых углов нашего изображения. Вот первый вариант:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/cc5eb3e214106079329ce1a49d2fc45ac4eb0ce4-1024x690.jpg)
Вернём назад значение SliceScale = 1.
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/e0860a02709429a9add303c5f2abe490a4513584-1024x733.jpg)
Это пример того, как можно не верно нарезать. Исправим наш “косяк” — сместим границы к центральному пятну…
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/72cd049ba29c5389a527239fe8182a1f7f3373c6-1024x718.jpg)
Как видим — совсем другое дело! Остаётся установить BackgoundTransparency = 1 для нашего фрейма и изображения и получим уже почти прелесть:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/679789be1c89b1181bcbfeccfcbfe3701aaac42a.jpg)
Но, нам не хватает одной детали — фона в центре. Для этого поместим ещё одно изображение во фрейм. Но поместим его под наше изображение, т.е. для него зададим 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)
И в результате наших трудов мы получаем вот такой результат:
![](http://blog.rconshop.ru/wp-content/uploads/2021/12/1ba9558a8cb1f5d9c59423101e572dacf28b8ebd-1024x743.jpg)
Думаю что он достоин похвалы.