Avatar Editor v2
This is a revamp of my original avatar editor. My old one had many issues and was also missing many features.
Links
Github: https://github.com/Y1195/Avatar-Editor-2
Roblox Model: Avatar Editor 2 - Roblox
Roblox Plugin: Avatar Editor Plugin - Roblox
Catalog Database: Catalog - Roblox This is just a bunch of StringValues the editor uses as a database. The plugin will insert this upon installing if you choose to.
Demo Place: Avatar Editor 2 - Roblox
Video Demo: [2021] Roblox In Game Avatar Editor - YouTube
Features
- Better performance. Loads items as you scroll instead of all at once.
- Supports R6. A lot of you wanted this so here it is. BodyScales are not supported for R6 as that is a Roblox limitation. The scale sliders will do nothing
- Saving. You can save your current avatar and even save multiple outfits.
- Themes. Comes with 3 themes out of the box. You can create your own themes, too.
- Modularity. You can customize how you load the avatar editor and even use your own DataStore system.
- Permissions. You can set up who can use the avatar editor through game passes and/or groups.
Demo Place
You can try out all of the features of the avatar editor in the open source demo place.
If you are confused about the API, you can check the demo place; specifically ServerScriptService.Script and StarterPlayerScripts.LocalScript.
The demo place shows off some of the features v2 has. I used TopbarPlus v2 and ProfileService loading the editor on the client and for saving your outfits, respectively.
Plug and Play
The plugin allows for quick installation. Upon installing the plugin, you will see two new, very fancy, buttons.
Click the Installer button. You should see:
Plugin Image
- Overwrite Settings: Will overwrite your existing settings! Including your permissions if you have any set up.
- Overwrite Catalog: Will overwrite your current catalog database and replace them if the default one. Make sure this is checked on first install!
-
Quick Start: This will insert a
ScriptandLocalScriptintoServerScriptServiceandStarterPlayerScriptsrespectively.
If you already have the avatar editor installed by other means (not through the plugin) and you want to use the plugin, move your themes to somewhere else, delete the AvatarEditor folder, install through the plugin, and move your themes back.
Your themes will not be deleted if you have any upon installing.
If you want to use your own DataStore system or your own client loading system then you can delete the contents of Script and LocalScript.
Themes
To add your own theme, open up the themes folder in AvatarEditor.Themes. You will see 3 themes it comes with. Copy or duplicate any one of them, and rename it to your theme name.
Theme names must be unique!
You can play around with the colors to your liking. It might be confusing what color matches with what.
Settings
To change some of the settings, open the Settings module in AvatarEditor.Shared.Settings.
MAX_ACCESSORIES How many accessories the user can equip at once. Do not set this too high.
MAX_COSTUME How many costumes the user can create. Do not set this above 4000 or your DataStore might fail.
DEFAULT_THEME What the default theme is if the user first joins.
FILTER_USERS If this is set to false then anyone is able to use the editor. See Permissions below.
I do not recommend changing any other setting unless you really know what you are doing.
Permissions
You can set up who can access the Avatar Editor. To do so, set the FILTER_USERS setting to true.
Groups
Anyone who is in any one of these groups and whose rank is greater than the required rank.
Groups = {
{
-- anyone in this group can use the editor.
GroupId = 1200769,
},
{ -- anyone in this group with a rank higher than Rank can use the editor
GroupId = group id,
Rank = 120,
},
-- add more below
},
Players
Anyone whose UserId matches .
Players = {
1,
22507135,
-- add more userIds here
},
Game Passes
Anyone who owns any one of the game passes.
GamePasses = {
{
GamePassId = 948137,
},
{
GamePassId = game pass id,
},
-- add more below
}
Updating the Avatar Editor.
- Step 1: Insert the updated Avatar Editor model.
- Step 2: Copy your custom themes and paste them into the updated one.
- Step 3: Copy over your settings. Do not copy the settings module, manually change the settings of the updated one to match your current one.
- Step 4: Delete the old
AvatarEditorfolder andAvatarEditorServermodule. - Step 5: Move the updated stuff to their respective parents.
I should probably make an easier way to update this.
Updating the catalog database
This is really hard to do. See
I am still using the database I generated for my v1. I noticed that it was missing items; I did not add any new accessories to it. I removed UGC items though.
I will try to figure out how to update the database and release it here.
Manually Adding Items
The plugin makes this easy if you want to add accessories that are not part of the database. Click the Adder button in the plugin.
The first section is for adding Roblox accessories and UGC accessories only.
- Get the id of the asset you want.
- Paste it into the text box.
- Click the
Addbutton. It should show up below.
Plugin image
If you want to add a custom accessory, you have to upload it as a model first and use that asset id in the second section. You can pick what type of asset it is in the dropdown menu.
To remove ANY accessory in the database, use the Catalog Accessories section and click the Remove button instead. It will remove any accessory matching the asset id, including your custom ones.
Click the Update database button and wait for it to finish updating. Hopefully nothing goes wrong and the accessories you want show up when you use the editor. The adder does tell you at the end which accessory was successfully added or not.
Credit to AstrealDev - RequestQueue
Credit to AeroGameFramework
Basic Usage
This is for if you decided to delete contents the ServerScriptService and StarterPlayerScripts folders.
Server Side
If you are using ProfileService, it should be as simple as copying and pasting.
Add this table to your data template. You need to require the Settings module, too.
Avatar = {
Equipped = nil,
Costumes = {},
Settings = {
Theme = Settings.DEFAULT_THEME,
},
},
and call these functions
:CacheOutfits(player, profile.Data.Avatar.Costumes)
:CacheSettings(player, profile.Data.Avatar.Settings)
when your data loads. And call
:ApplyDescriptionFromInfo(character, profile.Data.Avatar.Equipped)
every time a player’s character gets added. Player.CharacterAdded.
.HumanoidDescriptionChanged:Connect(function(player, description)
local info = :ToAppearanceInfo(description)
_user_equipped_outfit_ = info
-- set the equipped outfit to `info` for saving
end)
.CostumeAdded:Connect(function(player, description, info, index)
table.insert(_user_outfits_array_, info)
-- insert the new outfit info into the user's data for saving
end)
.CostumeRemoved:Connect(function(player, description, info, index)
table.remove(_user_outfits_array_, index)
-- remove the outfit from user's data
end)
.SettingChanged:Connect(function(player, setting, value)
_user_settings_dictionary_[setting] = value
-- save settings for user
end)
Client Side
You can set up what ever method you want to load the avatar editor.
Just call
:Load()
to load the avatar editor. And call
:Destroy()
to hide the editor.
By default, the editor will only tween the Gui open, you have to add your own effects when it opens; like disabling character controls and moving the camera around.
.Started:Connect(function()
-- disable character controls, lock the camera and stuff
end)
.Destroyed:Connect(function()
-- enable character controls, return camera back to player
end)
RunService.RenderStepped:Connect(function(delta)
:OnRenderStep(delta)
-- you have to call this and pass the delta for tweening the Gui.
end)
API
This is for if you decided to delete contents the ServerScriptService and StarterPlayerScripts folders.
AvatarEditorServer
local AES = require(ServerStorage.AvatarEditorServer)
Methods
:CacheSettings(Player: player, dictionary: config)
This is for saving user settings. Call this function when you load the user’s data.
config needs to be a dictionary with these contents:
Theme = Settings.DEFAULT_THEME
:CacheOutfits(Player: player, array: outfits)
This is for saving user outfits. Call this function when you load the player’s data.
outfits can be an empty array.
:ApplyDescriptionFromInfo(Character: character, dictionary: outfits)
This is for applying a user’s currently wearing outfit when they join or respawn.
outfits needs to be a dictionary.
:ToHumanoidDescription(dictionary: outfit)
Generates a HumanoidDescription instance from a dictionary.
:ToAppearanceInfo(HumanoidDescription: description)
Generates a dictionary from a HumanoidDescription.
:GetSettings(Player: player)
Returns the user’s cached settings.
:GetOutfits(Player: player)
Returns the user’s cached outfits.
Events
.HumanoidDescriptionChanged(Player: player, HumanoidDescription: description)
Fires when a user changes their outfit through the avatar editor.
.CostumeAdded(Player: player, HumanoidDescription: description, dictionary: outfit, number: index)
Fires when a user creates a new outfit.
.CostumeRemoved(Player: player, HumanoidDescription: description, dictionary: outfit, number: index)
Fires when a user deletes an outfit.
.SettingChanged(Player: player, string: setting, any: value)
Fires when a user changes a setting.
.PermissionFailed(Player: player)
Fires when a user who does not have permissions to use the editor somehow fires the RemoteEvent.
AvatarEditorClient
local AEC = require(AvatarEditor.AvatarEditorClient)
Methods
:Load()
Begins loading the avatar editor.
:Destroy()
Cleans up the avatar editor.
:GetAlpha()
Returns the alpha in the tweening stage.
:OnRenderStep(number: delta)
Call this on RunService.OnRenderStep. This is for tweening. You need to call this if you are making your own client side loading system.
Events
.Started()
Fires when the avatar editor starts to load. This does not fire if the user does not have permission to use the editor.
.Loaded()
Fires when the avatar editor is finished loading.
.Destroyed()
Fires when the avatar editor is cleaned up.
.PermissionFailed()
Fires when the user does not have permission to use the editor
Updates
-
v1.0.0
Initial release -
v.1.1.0
Better mobile support. Tap and hold to open the purchase prompt. Tap and hold to delete an outfit.
Permissions. You can set up who can access the avatar editor. -
v1.1.1
Restructure. Introduces the companion plugin. -
v.1.1.2
Fixed infinite yield introduced in the previous update.
Bugs
DM me here on the forum or reply below if you find any issues.
Credits
Check out some of the awesome stuff people made that made this avatar editor possible
Maid
Spring
Promise
Signal
TableUtil
Gui Components Library
RbxMusic - I reverse engineered this plugin to add that load items as you scroll feature as well as structuring ideas. Go check and buy this if you want.
TopbarPlus v2
ProfileService
RequestQueue
