Spritely is a plugin designed to make 2D game in Roblox, simple and intuitive. With Spritely, you can draw your own sprites, create custom objects, and bring your 2D game to NEXT LEVEL. Get Started with Spritely
Install the plugin now and start building your 2D game directly in Roblox Studio with powerful, easy-to-use tools.
About the Beta
Spritely is currently in beta. The editor may still have bugs, and your feedback will help improve its performance and stability. My goal is to make this tool as efficient and user-friendly as possible.
There’s still a lot to refine, but here’s what Spritely already offers:
Pixel-Based Collision Detection
Accurate collision based on sprite pixels, fully supporting rotation and scaling.
Animation Player
Play animations at your chosen frame rate (FPS).
Sprite and Animation Editor
A built-in editor to draw and animate your own 2D sprites.
How to Use
The plugin automatically adds a ModuleScript to your game. This script currently includes four main methods you can use to bring your 2D objects to life.
Module Methods
CreateObject(ImageLabel, SpriteFolder, Frame)
Registers an ImageLabel or ImageButton as a 2D sprite object.
ImageLabel (or ImageButton): The UI instance to register for use with the module.
SpriteFolder: The name of the sprite in the sprite folder (string). If no sprite with that name is found, the method is canceled.
Frame: The initial frame to display. If nil, it defaults to frame 1.
SetFrame(ImageLabel, Frame)
Changes the current frame of a sprite.
ImageLabel (or ImageButton): The UI instance to update.
Frame: A numeric frame index. If the frame doesn’t exist in the animation folder, the function is canceled.
IsTouching(Image1, Image2)
Checks for pixel-perfect collision between two sprite instances.
Image1: The first ImageLabel or ImageButton.
Image2: The second ImageLabel or ImageButton. Note: This method is not optimized for high-resolution images. Alternative collision modes (Box, Radial, Hull) are currently in development.
PlayAnimation(ImageLabel, FPS,Loop,MinFrame,MaxFrame)
Starts playing the animation of a registered sprite.
ImageLabel: The registered UI instance. If the instance was not created using CreateObject, the animation will not play.
MinFrame: It is the minimum frame for the animation, this with the intention of making a single ImageLabel able to play animations according to the actions (Jump, Run, etc.)
MinFrame: It is the maximum frame for the animation, this with the intention of making a single ImageLabel able to reproduce animations according to the actions (Jump, Run, etc.)
StopAnimation(ImageLabel)
Stops the animation currently playing on a registered sprite.
ImageLabel: The registered UI instance.
RayCast(Origin,Direction)
This method returns a table.
Instance: The instance that received the RayCast
Position: The position in pixels on the screen where the RayCast collided.
-This is in development, so some improvements are needed.
Known Issues and Warnings
The editor is undergoing a full revamp, so some issues may appear. I’m actively working to provide the best possible experience.
There is a strange bug when the brush is at its minimum size: certain pixels may become invisible but still exist, which can affect the final image. Fixing
When scaling ImageLabel or ImageButton objects too much, collision detection may lose a bit of accuracy (though very slightly). Fixed
The selection tool in the editor can be a bit unintuitive to use. Delayed
The color picker feels a bit odd at the moment. Temporarily removed
Line drawing is not yet implemented. In development
You cannot yet change the brush shape (square or circular). Aggregate
The layer system is still very early in development, but I can finish it quickly if I see strong interest from the community. In development
There is a strange bug where you cannot draw on the last row or column of the canvas. In development
Editor zoom is not dynamic—it only zooms into or out from the center of the image. In development
Reread the methods, as several parameters have changed.
-PlayAnimations(ImageLabel,Properties)
ImageLabel: This is the UI object that will play an animation.
Properties: This is an array with (currently) 3 indices.
*[“Loop”]:boolean;
*[“Orrevide”]:boolean;
*[“FPS”]:number
If this parameter is null, it will use a default configuration.
New Parameter
-ChangeProperties(ImageLabel,Properties)
ImageLabel: It is the ImageLabel/ImageBUtton that has been registered with the CreateObject function, this will be the instance whose animation properties will be changed.
*Propierties:*Array with the values ​​you want to change, it is not necessary to send the 3 current properties, the script will read the table index and decide how to change the properties.
Not to be rude, but -ly is a suffix, and it is used to form adjectives and adverbs. It is used when something is similar to the word it is formed from. E.g. earthly, quickly, simply, etc. By your logic, the word “simply” sounds like Lunchly.
Hello everyone. In case anyone is using the plugin (which I don’t think they are), please be patient; as I’m working on major optimization improvements (including a new method (it’s a RayCast). Everything is going well, I’ve greatly improved the collision detection optimization, and I’m working on the Layers system; the problem is because I had abandoned this project and I’ve forgotten many of the functions or ways in which I did it (very disorganized by the way XD). Anyway, please be patient. https://youtu.be/JqoYD6da4EQ
Version 3 is here, and I’m working on new features for the editor that bring significant improvements.
Currently, the sprite size is fixed at 337×337, but I’m implementing a feature that allows users to choose the canvas size when creating each sprite.
I’ve also optimized the collision and raycasting system by about 90 %, significantly reducing CPU usage. Previously, an image with a lot of detail could take up to 70 ms to process; now it doesn’t exceed 20 ms, even with complex images.
I’d also like to point out that the button you see isn’t just for decoration: I’m working on making it possible to add sprites from there without writing a single line of code. You’ll just need to add them to the scene, position them, choose their initial frame, decide whether they’ll play an animation (and which one, including its parameters), and the general script —coming soon— will handle everything.
The goal is to make it easy and intuitive for everyone. see you soon!
I have some important updates to share and many improvements on the way for the editor. Here are the most recent progress highlights:
Fixed bugs & implemented improvements:
The drawing system now aligns correctly with the grid.
Added the Color Picker tool and improved the driggers to adjust pixel size, Alpha channel, and brightness.
The grid now automatically adjusts to improve drawing precision.
Sprite size is now dynamic (though it cannot be changed once assigned).
You can import images (only your own, due to platform limitations).
Collision detection has been optimized.
Fixed a memory leak in the raycasting system.
Optimized the sprite saving system.
Fixed 12 syntax errors.
Further optimized the raycasting system.
You can now convert an imported image into a SpriteSheet.
Added extra buttons for each sprite: delete, import, rename, and a dimension indicator.
Currently working on:
TextBoxes for the driggers.
Significantly improving the selection tool: making it more dynamic, allowing sprite rotation, and fixing the bug that prevents selecting the last line of pixels.
Layer system (in progress).
Better support for Team Create.
Fixing the zoom issue with images that have different axis scales.
Adding a duplicate button.
Integrating ChangeHistoryService when deleting frames.
Normal map system (already coded, pending implementation & optimization).
Enabling the second button (“Edit Scene”) to make it functional.
Current critical issues:
EditableImage still has significant limitations, as only one can be updated per frame. Roblox has mentioned this will be addressed in the future.
The selection system is still broken, but I’ve researched promising methods to make it a very useful tool.
The editor remains a bit clunky and unpolished (still improving it).
Difference between import buttons
_Imports an image or SpriteSheet and uses the image’s dimensions to automatically create a new sprite with those measurements.
New Features: Animation Events & Stereo Sound Service
We’ve added events for animations and a stereo sound playback service based on your ImageObject’s position.
Animation Events
You can get animation events by calling: Spritely:GetAnimationEvents(ImageObject)
If the instance is registered in the plugin, it will return 3 events:
Played – Triggered when Spritely:PlayAnimation is used on that instance.
Stopped – Triggered when Spritely:StopAnimation is used on that instance.
Ended – Triggered when the animation has finished.
In a few hours, a new event will be added:
FrameChanged – Triggered every time the instance’s frame changes.
Stereo Sound Service
The sound service is very easy to use. Simply call: Spritely:AddSound(SoundId: string|number, ImageObject: ImageLabel|ImageButton)
This will return a Sound instance so you can change its properties, play it, or do whatever you need. The sound will follow the position of the ImageObject to simulate a 2D stereo sound effect.
Warning: A few minutes ago, generating a sound was causing small lag spikes, but they suddenly disappeared. If you notice this happening, please report it so we can work on a fix.
)
).