In Game Avatar Editor v2

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: GitHub - 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.
image

Click the Installer button. You should see:

Plugin Image

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 Script and LocalScript into ServerScriptService and StarterPlayerScripts respectively.

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!
image

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 AvatarEditor folder and AvatarEditorServer module.
  • 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.

Plugin image

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 Add button. It should show up below.
Plugin image

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

71 Likes

Looks really promising and cool! Great job! Nice GUI. Could you add the item’s name as well?

5 Likes

When you hover your mouse over each item, the name of the item will appear. I think that is what you mean.

3 Likes

Thanks for sharing this. Great work, I want to try this out.

I have a feature suggestion if you’re looking to add to this. How about a ‘modify’ GUI to reposition and resize the accessory to fit the avatar better. (lots of hats are too small and don’t fit over hair etc.) If you haven’t see this in a game, check out Crown Academy’s avatar editor, it is very good and feature rich.

3 Likes

Wow!
I know your old plugin.
This is amazing.

I definitely plan on trying it.

It seems like it’s coded to stay in game but is it possible (new to Lua and Roblox)
To use it during development then remove but have prior to removing, saved the models?
Awesome job

2 Likes

I did think about it, but it was too complicated to integrate with what I had done already.

I do not know exactly what you mean here. Do you want to save outfits while in studio to use for later?
You can do that by creating an outfit and checking under Players[your_name_here].AE_Costumes folder. There should be HumanoidDescription’s for each outfit you create. You can just copy and paste the folder.

You can then use ApplyDescription to apply the description to an NPC.

2 Likes

Could you bring support for game pass only users as I would love to use this for certain people so it doesn’t get abused?

5 Likes

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. Suggested by: @CorruptDetected90
If the user meets any one of these requirements they have access to the editor:

  • FILTER_USERS settings is set to false.
  • They are in any one of the groups and they are higher ranked than the required rank.
  • They own any one of the game passes
  • Their UserId is on the list.
7 Likes

Will you ever add a feature in some script so you can manually add items from the catalog, seeing how you can’t load all of the catalog into it?

2 Likes

Hey do you have Discord. I seem to enabled everything and I still don’t see this working?

2 Likes

Any errors, is it just not appearing?

2 Likes

No errors it’s just not appearing.

2 Likes

You put everything in the right place, and it’s not showing in the topbar?

2 Likes

Everything is correct and it isn’t showing in top bar do you have Discord?

2 Likes

Yes, and could send a screenshot of your explorer?

2 Likes

Yes since I have so much stuff in it I will need to take a picture one by one can you add me on Discord CorruptDetected#9384

3 Likes

oh WOW… I have no words to explain, how much time I had been waiting for this update Looks really Awesome! :wink:

Now lets see little kid’s selling this model on youtube for bobux… :sunglasses:

5 Likes

Added. You will need this: Avatar Editor 2 Functions - Roblox

See Manually Adding Items section for more info.

3 Likes

This is a great resource and I’m glad to see my module coming in handy!

2 Likes

Where this function should be placed?