NineSlice Plugin

stravant · August 13, 2014, 11:45pm

I made a plugin that makes working with NineSlices easy enough to actually be worth while: NineSlice Toolset
Some example usage:

EchoReaper · August 13, 2014, 11:47pm

Me no know what NineSlice is

Ripull · August 13, 2014, 11:49pm

I’m trying to understand what a Nine slice is.

Smooth cornered GUIs?

XAXA · August 13, 2014, 11:58pm

Allows you to stretch boxes to any scale without distorting the corners. Normally, the corners would stretch along with the image. For example:

Box, unchanged:

This is because the image is divided into 9 parts; 1 for each corner, 1 for each side, and a center. The corners do not scale, while each side only scales in one direction.

stravant · August 14, 2014, 12:03am

A bit more detailed explanation

:

EchoReaper · August 14, 2014, 12:14am

So basically what ROBLOX does for the chat and dialogue? o.o

Nice – I’ll have to check this out. I assume this only works with preset types of frames though.

GollyGreg · August 14, 2014, 12:24am

I had made my own module for this

MunimR · August 14, 2014, 12:31am

Crazyman32 beat you to this (pretty much 99% sure), but nice plugin nonetheless.

CeaselessQuokka · August 14, 2014, 1:43am

Really nice… I wonder how long this took and how hard it was. If it were any other scripter I’m sure (s)he would be crying, pulling his/her hair out, praying to lord it would work, and once all finished it is 1,000 lines of code. But, since it’s Stravant probably took him five minutes and 10 lines of code, XD.

You’re a wizard, Stravant!

MrgamesNwatch · August 14, 2014, 6:32am

Cool, I might find a use for this. Your Resize Align and Gap Fill plugins have been far more useful than I had originally anticipated.

ArtemisTheDeer · August 14, 2014, 8:11am

Is it called nine-slice or nine-patch? When I was working on Trouble in Christmas Town, Clonetrooper kept saying it was a nine-patch API he was working on.

blocco · August 14, 2014, 8:12am

B-b-b-b-but I did this before you…

gist.github.com

https://gist.github.com/blocco/654086d382c1cb79df6a

Scale9Frame.lua

local Create = LoadLibrary("RbxUtility").Create;
local UDim2, UDim = unpack( require(script.Parent.UDimExtended) );

function Scale9Frame( src, img_size, edge_size )
	local frame = Instance.new("Frame");
	frame.Name = "Decoration";
	frame.Active = false;
	frame.BackgroundTransparency = 1;
	frame.Size = UDim2.new( 1, 0, 1, 0 );
	frame.Position = UDim2.new( 0, 0, 0, 0 );

This file has been truncated. show original

SkinExplorer.lua

local Create = LoadLibrary("RbxUtility").Create;
local Scale9Frame = require(script.Scale9Frame);

local test_frame = Create("Frame"){
	Active = false;
	Name = "TestFrame";
	Size = UDim2.new( 0.6, 0, 0.6, 0 );
	Position = UDim2.new( 0.2, 0, 0.2, 0 );
	BackgroundTransparency = 1;
	Parent = Create("ScreenGui"){

This file has been truncated. show original

SkinExplorer.md

README
======

1. Take **SkinExplorer.lua** and put it in a `LocalScript` in a `ScreenGui` in `StarterGui`.
2. Put **Scale9Frame.lua** and **UDimExtended.lua** inside of that LocalScript, preserving their names (but omit the *.lua*).
3. Test in play solo!

There are more than three files. show original

EDIT: Stravant, do you know how to scale the stuff once it gets below a certain size? It seems fairly irregular once the scale9frame’s size is less than the image which it uses

blocco · August 14, 2014, 8:39am

For all of you who want some images to play with:

http://www.roblox.com/shadow-outset-item?id=170664288 – this is made to go OVER your frames; there’s some padding to it, I think 4 pixels each side

digpoe · August 14, 2014, 12:31pm

I’m pretty sure ROBLOX calls these Scale9Frames. Also, I’m pretty sure every game does this, if they want to make easily scalable interfaces.

anon92814647 · August 14, 2014, 1:25pm

[quote] Really nice… I wonder how long this took and how hard it was. If it were any other scripter I’m sure (s)he would be crying, pulling his/her hair out, praying to lord it would work, and once all finished it is 1,000 lines of code. But, since it’s Stravant probably took him five minutes and 10 lines of code, XD.

You’re a wizard, Stravant! [/quote]

To be honest, this isn’t actually very hard to do. All you need to do is subtract the width of the borders from the width/height of the frame and position/resize the borders and corners accordingly. It doesn’t take a wizard, or even a professional to do this.
If you know the right method of doing something, then usually, it’s quite simple to do.

But I do want to give credit where credit is due: This is a very nice plugin, and I’ll probably be using it when I want to create pretty edges and corners for my GUIs.