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

Resources Community Resources
, , , ,
#1

Last Update: 11th of August 2024

Update includes >
  • Support for the non-sequential ID update
  • Image loading is much faster now
  • Image Load failure should no longer happen
  • Added a new Recent images tab. Lets you keep images you’ve used before!

image 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

image
image688×572 29 KB

image
image702×580 126 KB

image
image705×572 67.4 KB

How to use
Lesson 1: Insert menu

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

image
image696×578 46.2 KB

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
image

=

image
image681×555 85.2 KB

Lesson 2: Sidebar and features

image
image164×532 15.4 KB

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

image
image691×570 82.6 KB

  • Settings(coming someday I don’t know when lol) pls suggest some stuff for this I have no idea what to add
  1. 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

image
image691×573 78.3 KB

  1. 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.
    image

  2. 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!

image
image518×528 38.5 KB

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

image

image

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

Some Cool features the plugin has

  • Added the ability to insert images from models, meshes, audio, videos, fonts, etc. Insert the id of the asset and it should give you back the thumbnail image of it.

  • Added the ability to insert local image files from the roblox library. Things like the default ImageLabel image and so on.

  • Added the ability to edit image size of the cropping image… The size set for asset thumbnails and roblox library images is 420x420, but that won’t always be accurate to the size of the image(for instance, the default roblox imageLabel png is 256x256). You can use things such as the roblox image slicer or other preferred methods to see what exactly the size of your desired image may be and input it in the text boxes.

  • Sidebar sections are now collapsible(they do not save if you restart the plugin)

  • Holding either CTRL / SHIFT / ALT will allow you to scroll sideways on the canvas(may need to focus on it before you do it so it registers)

  • You can now also scroll on the sidebar, making it easier to use the plugin with a smaller window size without losing of content!

  • Recents Tab! Have any image or asset id saved for later uses, no need to find it again!

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?

35 Likes
#2

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

#3

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

#4

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?

#5

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

image
image701×574 82.9 KB

It will convert it into this kind of table <
image

#6

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.

1 Like
#7

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:

image
image1542×593 106 KB

#8

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:

image
image701×574 89.4 KB

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!