Image Crop - Crop images and make sprite sheets the easy way!

[bostaffmanbulgaria1 (Lua_ProgrammerBG)]

Last Update: 30th of January 2024

Update includes >

• General UI improvements
• Fixed a bug where the plugin would just break for no reason
• Added a new Animation export feature(basically spritesheet gifs)

Image Crop

Ever wanted to crop image on roblox, but the process is too tedious and you want faster and better results?
This might be the plugin for you!

Image Crop is a plugin that allows you to crop, flip images and make sprite sheets quick and easy with it’s built in Grid snapping feature!

Quick screenshots

How to use

Lesson 1: Insert menu

The first thing you’ll see when you launch the plugin is this text box:

Within the text box you can insert an id of 3 kinds(Image id, decal id and model id)
You can also insert from an image you have selected or even import a local temporary file!

The image and decal ids are different, but will give the same result. (due to roblox using image ids to set images)
If you were to insert a model id, then it would return the model’s thumbnail in 420x420 size

=

Lesson 2: Sidebar and features

The sidebar contains:

1. Background - Option to change the background of the image between white, black or transparent(affects backgroundColor3 and BackgroundTransparency after inserting)

2. Image Size - As of writing this post, this is to only show the size of the image, but isn’t an editable property

3. Rect Offset - This allows you to move the crop box around by typing numbers(or simple math operations like 2+2; 2-2; 2*2; 2/2; 2^2)

4. Rect Size - This one lets you resize the crop box, same as the Rect Offset, math operations are possible within the text box

5. Additional options - As of writing this post, there are 3 usable buttons in this pane.

• Flip Horizontally
• Flip Vertically
• Grid Snap toggle - Depending on the Rect Size it will snap the crop box in the on-canvas editor

grid snap example

Generally useful for sprite sheets like the one in this image

• Settings(coming someday I don’t know when lol) pls suggest some stuff for this I have no idea what to add

6. Small preview - Want to see how the image looks as of now? use this preview to do so!

• Keeps aspect ratio of the crop box
• Can be clicked to become a BIG preview
• The preview allows you to also play the image and change the fps(helpful for sprite sheets)

example of big preview

7. Insert options - Here is where you can insert the cropped image
   When you click on this option, you will see a dropdown menu with all available insert options
   Then you want to click the little checkmark button and it will insert it with the selected method.
   

8. Crop a new image - Goes back to lesson 1 of this quick tutorial

Lesson 3: On-Canvas editor

Here you’ll be able to move and resize the crop box using your mouse
This is for when you want to get things done quick!

Hovering over one of the 3 bottom edges of the crop box, you’ll notice them highlight in red!

You can now click and hold them to resize!
Resizer does NOT support grid snapping, unlike moving the crop box, which DOES DO

Do you want to get it?
Here is the link to it: https://www.roblox.com/library/13844097984/Image-Crop

How useful did you find this plugin?

[devlazerr]

Looks super cool! I’ll definitely consider checking it out soon!

[AirtonGamer_Ytpro]

If you can make it as a module script it would be much better for my use case.

[bostaffmanbulgaria1 (Lua_ProgrammerBG)]

I think I see your point.
You want to be able to export the sprite sheet as a table, right?
Something like

local SpriteResults = {
[1] = Vector2.new(0, 0),
[2] = Vector2.new(42, 0),
[3] = Vector2.new(84, 0),
...
}

Am I guessing right?

If so, do you have any formatting preferences?

[bostaffmanbulgaria1 (Lua_ProgrammerBG)]

While I was remaking the insert menu I ended up including the feature you wanted!

It will convert it into this kind of table <

[iGottic]

You should be able to name crops for alternative indexing. You can do this by including Name : string in the same dictionary as ImageRectSize and ImageRectOffset.

I would also like to see this as a Fusion component, and the component itself could include the crop data. This would make it easier to integrate into my workflow, at least.

[bostaffmanbulgaria1 (Lua_ProgrammerBG)]

I’ll Add the naming option then.
I’ve never done fusion components, is it supposed to be the full ImageLabel with all modified properties?
I used Codify for this screenshot:

[iGottic]

I would make the fusion component a module with a .new() constructor. You could have child modules below it holding data for various images and their data, and you could call .new(imageId, ImageCropName) to get that image.

imageId is the associated id of the image, which a child module would be named after. Alternatively, you could have a parent name and just call the parameter imageName. ImageCropName is the specific crop data applied to the image.

After calling .new(), you return a dictionary in this format:

return {
   imageLabel = imageLabel, -- Component
   imageCropValue = cropValue, -- Call :set() on this
}

Specifically, you could create an observer that tracks a Fusion value, which I’ll call cropValue. imageLabel is the ImageLabel generated by Fusion.new(). So, anytime you call cropValue:set(cropName), the observer will update the crop of the image.

Let’s say I have this example image of keys:

This is the same example I used. If your constructor is croppedImage.new(imageId, ImageCropName), then I can do:

-- Returns the image cropped to "a"
local keyImage = croppedImage.new("rbxassetid://123456789", "letterA")

-- Place the image where needed. Maybe also have a "properties" optional third parameter?
keyImage.imageLabel.Parent = myParent

-- Change the image crop so that it changed from "a" to "b"
keyImage.imageCropValue:set("b")

-- Change the image crop so that it changed from "b" to "f5"
keyImage.imageCropValue:set("f5")

-- Bonus! We can, at any time, read what crop is currently being used
print(keyImage.imageCropValue:get()) -- Prints "f5"

If you want, I can make this module and forward it to ya. I can give it as both a Wally package and GitHub repository.

Hope this helps describe a better picture!