Making an in-game Avatar Editor

Help and Feedback Scripting Support
#1

Hey there, I was wondering how I would go about making an in game avatar editor.
Basically, what way would be the best way of doing it?

  • Somehow adding the items from the catalog automatically (is this even possible?)
  • Adding the items manually

I’m not sure if the first option is even possible, let me know if it is, and if so, how I would go about doing it with that method.
In regards to the second option, how would I display the items from the catalog? Would it be as easy as uploading an image of that item and then putting it as the Image in the ImageButton?

8 Likes
HTTP Service & Catalog API
Importing catalog into game
#2

You could take the roblox code for the avatar on the website and transfer it to the roblox game then the hard part for you would trying to fully implement it
Good luck on your quest
Have a nice day

#3

I would like to warn you before doing so as it can be exploited by hackers in many different ways, this has happened to meepcity and it wasn’t good at all.

2 Likes
#4

Is this in regards to the 1st option, or is it just in general? How can I avoid that happening to me?

2 Likes
#5

Yes, it is possible! Here is an open-source example Open-source In-Game Avatar Editor

This is much easier, I have actually done this before! as for what I would do, it depends on the use case and what kind of game you are making.

1 Like
#7

I’m currently in the middle of reworking my current in game avator editor. I don’t know if uploading from the catalogue automatically is the best idea, as it could add a bunch of junk items you don’t want in game. Here’s what I am currently doing for my faces

image
image1920×1080 306 KB

Then I can have values, like do they require VIP to equip, and later on down the track how much an item would cost, etc.

Then I simply loop over each item, using the ID you can set an icon to the asset icon using this

Icon.Image = 'https://www.roblox.com/asset-thumbnail/image?assetId=' .. id .. '&width=420&height=420&format=png'

And that works for mostly everything, such as faces, clothing, accessories (doesn’t work on bundles, might be few other things as well)

In case you want the code for getting icons for bundles

Icon.Image = 'rbxthumb://type=BundleThumbnail&id=' .. id .. '&w=420&h=420'

Problem is, it can be quite time consuming and tedious having to get ids for each item, and their names, etc. But it’s usually worth it as you can control what items get added to your in game customisation.

Feel free to ask any other questions, would be more than happy to answer :slight_smile:

4 Likes
#8

I use the same method for my avatar editor, but for loading images I use Roblox’s newest method which can be found here.

Example: rbxthumb://type=Asset&id=24813339&w=150&h=150

2 Likes
#9

:OOO Guessing I can change the w and h to 420 tho right??

#10

That’s a really nice way of doing it. Thanks for the help everyone. :slight_smile:

EDIT: This is how I did it in the end:

image
image204×787 4.48 KB

It’s categorised for two reasons:

  • Ease of use
  • Organising into categories in the avatar editor
2 Likes
#11

That’s basically how I’ve done it :smiley: It can end up being hundreds of lines long, but if everything is kept organised and clean then navigating around it and adding/removing items won’t be a hassle :smiley:

1 Like
#12

What way did you get the info about the items? Was it through :GetProductInfo() in MarketplaceService or did you query the catalog API?

#13

:GetProductInfo()

I’d recommend getting anything that you’re gonna include in all UI elements manually, as :GetProductInfo() has a 100 query request limit. But if you only require the items info upon player selecting the item then you should be fine.

#14

Ah I see, how can I display the item’s icon then?

#15

Is the new method, so I would recommend using this. In your case, looping through all ID’s and then like so

Icon.Image = “rbxthumb://type=Asset&id=“ .. id .. “&w=150&h=150”

And you can change the ‘150’ to ‘420’ to get a higher res image

Don’t quote this, but I’d assume it’d give you a better image res

2 Likes
#16

Ah I see now, thanks for the help :slight_smile:

1 Like