Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evaera/RadialSpriteSheetGenerator
This is a web app that generates radial progress indicator sprite sheets right in the browser. Primarily made for Roblox, but will work for anything
https://github.com/evaera/RadialSpriteSheetGenerator
Last synced: 3 months ago
JSON representation
This is a web app that generates radial progress indicator sprite sheets right in the browser. Primarily made for Roblox, but will work for anything
- Host: GitHub
- URL: https://github.com/evaera/RadialSpriteSheetGenerator
- Owner: evaera
- License: mit
- Created: 2018-06-13T14:52:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T22:11:16.000Z (about 2 years ago)
- Last Synced: 2024-09-19T04:19:20.916Z (4 months ago)
- Language: TypeScript
- Homepage: https://eryn.io/RadialSpriteSheetGenerator/
- Size: 1.64 MB
- Stars: 13
- Watchers: 6
- Forks: 6
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-roblox - Radial SpriteSheet Generator
README
# RadialSpriteSheetGenerator
This is a web app that generates radial progress indicator sprite sheets right in the browser.
## Building locally
To build the web app locally and make changes yourself, simply clone this repository and run [`yarn`](https://yarnpkg.com/en/) to install the dependencies, then `yarn start` to start the app.
## Use in Roblox
For ease of use in Roblox, a module is provided that can take in configuration the web app provides and can make an ImageLabel or ImageButton display your progress indicator with little work.
To get prepped, follow these instructions:
1. To get the module, save it from [here](https://raw.githubusercontent.com/evaera/RadialSpriteSheetGenerator/master/roblox/RadialImage.lua) and then put it in your game as a ModuleScript.
1. The demo below assumes you put the module into ReplicatedStorage named "RadialImage".
2. Use the web app to generate your sprite sheets and configuration JSON. Upload the images to Roblox.
1. Make sure you tick the "Use in Roblox" checkbox before copying the JSON.
3. Modify the JSON, replacing the number part of `rbxassetid://1` with the Image ID of the first image you uploaded (and likewise for any additional images).
4. Store the JSON in your Roblox game, either as a StringValue or embedded in a script somewhere.
1. The demo below assumes you put the JSON into a StringValue named "Configuration" inside the script that's running.
```lua
-- For the purposes of this demo, the script is located inside of an ImageLabel.
-- Make sure you update the following line to point to wherever you added the module in your game:
local RadialImage = require(game:GetService("ReplicatedStorage"):WaitForChild("RadialImage"))
local r = RadialImage.new(script.Configuration.Value, script.Parent)
game:GetService("RunService").Heartbeat:Connect(function()
r:UpdateLabel(tick() % 5 / 5)
end)
```
### API
```cs
RadialImage RadialImage.new ( configuration [, label])
/// Instantiates a new instances of RadialImage.
// @param configuration Expects a valid configuration generated from the web app, in either JSON or table form.
// @param label Optional, provides a label to be used with the UpdateLabel method. If this is omitted, you must pass it as the second argument to UpdateLabel.
// @returns RadialImage A newly-created RadialImage instance.
```
```cs
void RadialImage:UpdateLabel (number alpha [, label])
/// Updates an ImageLabel or ImageButton to show the most appropriate frame based on the current progress.
// @param alpha A number between 0 and 1 that indicates how far along the progress is. The label will then display the most appropriate image based on the number of available images in the sprite sheet.
// @param label Optional, allows you to pass in a custom label to do the update operation on. Required if `label` is omitted from the instantiation.
```
```cs
RadialImage:GetFromAlpha (number alpha)
/// Returns the information necessary to display the appropriate image from the sprite sheet.
// @param alpha A number between 0 and 1 that indicates how far along the progress is. Information for the most appropriate frame will be returned based on the number of available images in the sprite sheet.
// @returns Returns the X coordinate, Y coordinate, and the Image number for which to display based on the given alpha.
```
```cs
void RadialImage:Preload ()
/// Preloads the images in the given sheet and caches them in ImageLabels. You must call :Destroy() when you're done if you call :Preload()
// NOTE: Make sure your script isn't inside the label because your label will be cloned.
```
```cs
void RadialImage:Destroy ()
/// Destroys the cache of preloaded image labels. You only need to call this if you called Preload.
```