SimpleSprite | Create spritesheets for UIs easily!

Resources Community Resources
#1

This is still experimental and I have no idea how well it would work outside of localscripts, which is why I recommend you not to use them inside scripts. If you find any bugs, please either contact me immediately or post a report in this thread so I can give a public ETA over the bugs.

This module allows you to handle spreadsheets easier than if you’d manually change the ImageRectOffset by yourself.

Features in this handler:

  • Allows you to add ‘names’ to images for easier access.
  • Automatically marks the IDs for each image so you won’t have to.
  • Always returns true or false when an operation is successful or not.
  • Will probably update to add more features as time goes on.
  • Easy usage ‘API’.
  • Automatically detects the size of your imagelabels and creates the IDs based on it.

Drawbacks:

  • Does not support Scale sized images, only Offset sized.
  • Only supports ImageLabels and ImageButtons.
  • Probably buggy. You should have no issues as long as you know the size of the image containing the spritesheet, and have created that spritesheet based on the ImageLabel size.

The API currently has only 3 functions which should be enough for most spritesheets uses. If not, please contact me so I can add more features to allow them.

How to use:

  • Get the module and drag it into the localscript where you want to handle the spritesheets.
  • Require the module like this:
    local handler = require(script.SpritesheetHandler)
  • Set the module to handle the ImageLabel like this:
    local spritesheet = handler:New(instance, asseturl, {width = num, height = num})
  • Display the wanted sprites from the spritesheet using this:
    spritesheet:Display(SpriteID or Name)
  • Want to access the sprites in a manner you can remember? Use this:
    spritesheet:SetName(SpriteID, Name) → spritesheet:Display(Name)
  • Want to get the Vector2 positions from a spriteId? Use this function:
    spritesheet:GetVector(SpriteID or Name)

An API reference is included inside the module. Feel free to read it.

NAQ (Never Asked Questions)

Q: Why did you create this?
A: I made it so it would be used in my admin system Redefine:A. I didn’t get a chance to actually release the update because of an issue I have.
cough cough image

Q: You didn’t post the module in the post.
A: Yes I have.

Q: How does the module get the IDs from the spritesheet?
A: If set-up correctly, it will follow this path as shown here:

image
image834×832 29.8 KB

Q: Come on give me the module.
A: It’s literally here.

Q: Does foodbayer permit this module?
A:
image
Let’s not ask this, okay?

Q: module?
A: …

Q: Do I need to credit you for this?
A: Not at all! While appreciated, everything I release in DevForums is usable without my credit. Just uh… don’t steal it and claim credit for yourself thought. That would be a nasty move. :c

Q: wheres the module you li
Q: Are you planning to release other stuff you made for Redefine:A, such as the RC3S module?
A: I do have plans for them, yes. I’ll not say anything more.

22 Likes
SpritesheetVisualizer 1.0 - Easy gifs for your games!
0bBinary (EngiAdurite) | Scripter / Studio UI Design
Is it possible to make something like this kind of fire on 2D guis?
EasySprite | Spritesheet Handler & Flipbook Animator
#2

Useless Update 1.01;

  • You can now easily flip your sprites, using spritesheet:Flip().
  • You can now animate your spritesheets using lists. You can create a list by doing spritesheet:CreateList(Name). Read more about lists in the API docs in the updated module.
  • Renamed Spritesheet Handler to SimpleSprite.
2 Likes
#4


Love this little resource!

Though it being 3 years old I would love for it to be modernized!
I am using this for a game I’m working on and I’m in the process of making a few modifications.
but here’s a list of the issues I found:

  • Luau typing was only a few months old when this was released, so I have modified my own module to include typing
type Identifier = number | string

type List = {
	IDs: {number},
	Running: boolean,
	SetTable: (ids: {Identifier}) -> (),
	Run: (speed: number, loop: boolean) -> (),
	Stop: () -> (),
	Delete: () -> (),
}

type SpriteSheet = {
	Display: (identifier: Identifier) -> boolean,
	SetName: (id: number, name: string) -> boolean,
	GetVector: (identifier: Identifier) -> Vector2,
	Flipped: boolean,
	Flip: () -> boolean,
	CreateList: (name: string) -> List,
	GetList: (name: string) -> List,
	DeleteList: (name: string) -> ()
}

type Handler = {
	new: (inst: ImageLabel|ImageButton, asset: string, size: {with: number, height: number}) -> SpriteSheet
}

  • None of the functions really need to use the : operator.
    The resource doesn’t use any references to self, and by using : instead of . its assuming the first argument to be a reference to the same object that’s calling it.

  • Use of wait() instead of task.wait()
    wait is deprecated and slower.

  • List.Run() being tied to a while true loop, instead of a lifecycle event like .RenderStepped, while also causing the current thread to yield.

Anyhow, this is an awesome resource!

2 Likes
#5

Hi, thanks for the comment. Yes, the resource is old, and at the time task.wait() wasn’t really known outside of ‘bigger creators’.

I’ll update the module when I get the time to do so.

Appreciate it!

1 Like
#6

Found another issue, :Flip() doesn’t work properly since it doesn’t recalculate the cell offset on X, and instead displays the wrong cell.

in the worst cases it goes out of bounds on the right-most column and displays nothing.

I’ve already implemented a fix, but at this point I’ve made so many changes to the source i’m considering re-publishing this resource and rightfully crediting you. (I’ve also made it work with Scale!)

would this be okay with you? @0bBinary

#7

just from the video that @arbitiu provided, this resource looks awesome. please create a github repo for this and let us contribute :pray:

1 Like
#8

It would be great if you could post your versions apart ,it seems nice!, By the way @0bBinary , Awesome module

1 Like
#9

go for it! i’d be more than happy if someone actively makes use of my stuff and even happier if someone actually modifies them.

1 Like
#10

Haha, you replied just in time!

Hey guys I just opened a repo that you can find here, if you’d like to contribute

2 Likes