Hello! This is my first time making a open source module. Correct me if i make any mistakes.
AGL allows you to easily animate Grid Layouts. They work exacly the same as a UiGridLayout, but with added functionality.
In this example, you can see there is a object to the left, which is still a child of the parent of the UiGridLayout, but, it does not count as a real cell and stays on its position. (it was blacklisted)
In this example, you can see me messing around with a UiGridLayout. You can do the same in the example in the module. You need to use the real uiGridLayout, sincei made a .Changed event, so that it will automatically also change the module’s Layout. the red Color is the real uiGridLayout.
Features
-
It is exacly the same as a UiGridLayout Every property is coded by myself, to always produce the same effects as a real UiGridLayout.
-
Animations for moving a cell to their next location, in case they need to be moved.Look at the properties section at OnPositionChange.
-
Animations for inserting a cell to the GrildLayout. This allows you to control how they appear, like fade in, and so on. Look at the properties section at OnCellInsert.
-
Anchorpointscan be set to any value , and the grid will still behave like normal. This allows you to set the Anchorpoint to something like (0.5,0.5). Adding a size increase will make this guiobject scale in all directions. That is the main purpose of this feature.
-
Sizes don’t need to be the cellsize This allows you to create hovereffects, that scale up the cell. Read more about that in the "added Properties section, at the ForceSize property.
Just note that you can also make simular to UiListLayouts. As you can just set the FillDirectionMaxCells to 1, which will make the uigridlayout 1D. You can read a little bit more about that in UIGridLayout | Documentation - Roblox Creator Hub.
All the old properties can be found at UIGridLayout | Documentation - Roblox Creator Hub. This module has all the properties that a real UiGridLayout has too!
Functions
module.new(UiGridLayout : UIGridLayout?, OtherProperties : Properties?)
This creates a new custom UiGridLayout. If UiGridLayout is passed, it sets its parent to nil, and copies all of its properties.. If UiGridLayout is nil, then it will inherit all the base properties from a Normal UiGridLayout.module:OrganizeGuiObjects()
This function recalculates all the new positions of the cells, and fires the OnPositionChange and, if there are new cells added, compared to the last time when organize was run, it will also run OnCellInsert.module:Void()
This function wil basically destroy the module, and put the UiListLayout back to its original parent.Added Properties
ForceSize: boolean?
ForceSize will make it, when you organize the grid, if it will also change the cells sizes to the cellsize. Automatically set to true.
OnPositionChange: (Object : GuiObject, Position : UDim2) -> ()?
OnPositionChangewill allow you to animate the clles, when the position changes.
Example:
OnPositionChange= function(Object : GuiObject, Position : UDim2)
TweenService:Create(Object, TweenInfo.new(.4,Enum.EasingStyle.Quint, Enum.EasingDirection.Out),{
Position = Position
}):Play()
end
Normally, this is set toa function, that automatically sets the position instantly, without animating it.
OnCellInsert: (Onbject : GuiObject, Position : UDim2) -> ()?
This function is called, when a new cell is added to the gridlayout, and the OrganizeGuiObjects method is called. This allows you to make a transition for a frame to go into the grid.
Example:
OnCellInsert = function(Object : GuiObject, Position : UDim2)
Object.Position = Position + UDim2.new(0,-100,0,00)
TweenService:Create(Object, TweenInfo.new(1,Enum.EasingStyle.Quint, Enum.EasingDirection.Out),{
Position = Position
}):Play()
end
AffectedGuiObjectsType: Whitelist | BlackList | Auto ?
AffectedGuiObjectsType allows you to change which objects you want to move.- Whitelist: AffectedGuiObjects is a table, and only Guiobjects that are in this table will be part of the grid. WARNING: Please make sure that the objects parent is the same as the guidlaouts parent. Not following this may have some unexpected results.
- BlackList: The same as Auto, but removes the objects that are in AffectedGuiObjects from the list of cells.
- Auto: Will get all children, and put them in the cell, if the object is a guiobject.
AffectedGuiObjects : {[number] : GuiObject}?
if AffectedGuiObjectsType is either set to Whitelist or Blacklist, then this table is used as support for their respective effect. Please read the effects above.
self.__UiGridLayout : UiGridLayout
If a UiGridLayout was made, while a real gridlayout was passed, then you can always acces that instance using this value.Updates
- VX.X.X is increases each time the module gets an entire new overhaul
- VX.X.X is increases each time there is an update, where you need to edit some part of your code in order for it to work again.
- VX.X.X is increased each time there are bugfixes or little update that require no manual change of your code to work. This means it can be updated to this version safely.
V1.1.0
- Removed an etra if statement that was unnececary in module:OrganizeGuiObjects()
- PositionChange changed to “OnPositionChange” to match with its similar function: “OnCellInsert”
- In the model, updated and made the Exmaple (previously ReadMe) more cleaner and readable.
Because of change 2, there is a need to change the property, when updating the module.
Current Patch bugs
- When VerticalAlignment or HorizontalAlignment are set to Center, then the Cells are shifted one pixel in their respective axis
Here is the Roblox model: https://create.roblox.com/store/asset/126049853207104/AGLModule
Note: The Roblox Model contains an example of how you could use. There are 2 frames, one with a real UiGridLayout, and one that is made by the module. The real UiGridLayout’s color is red, and the custom one is white.
And at last:
- This module might have bugs, and if you found one, please comment it in this post.
- Please share your AGL creations with us here!
- Credits are appreciated!
- Extra ideas for features are also welcome!
Will you use this module?
- I will use this recource!
- I will not use this recource.
0 voters
