Tools' Most Underrated Property: TextureId - How to Make Roblox-Styled Item Thumbnails

So, if you didn’t know, Roblox tools have a property called “TextureId”. I suppose most of us know this and this topic seems redundant but people seem to neglect the difference between not providing a tool’s TextureId and providing a tool’s TextureId. What dumbfounds me the most is how easy and quick it is. Instead of trying to describe what your tool is, you can use an image. After all, they say a picture is worth a thousand words.

Item thumbnails aren’t just good for tools either. They can also be used to increase performance from a ViewportFrame to an ImageLabel (if you don’t know what that means, don’t worry).

Anyway, before I start this tutorial, here are the prerequisites, if you don’t know how to do one of them, just click on it and it’ll bring you to some tutorial on how to do it (except for the indexing one, wasn’t able to find a tutorial for it):
You must:

  • Know how to index (find) an object in the workspace through scripts, which is just:

workspace.Model.Part

Step 1: Setting up

Okay, for this tutorial I’m going to be using a cube. Just put your item into the workspace:

Next, you have three options:
Option 1, select the object and over in the explorer right click (or for Mac it’s called secondary click which is control + click) this selection, then press group
Option 2, press control (command for Mac) + G
Option 3, insert a model into the workspace and drag the part into the model

It should look something like this, your object should be a child of the model:

Screen Shot 2021-09-20 at 10.46.13 PM

Now, it’s crucial that you name this object something unique, nothing in the workspace should have something with the same name as the model:

Screen Shot 2021-09-20 at 10.54.43 PM

Step 2: Positioning your camera

The easiest way, in my opinion, is to select the object, then press F. This focuses your camera onto the object and you can move your camera around to adjust if you need.

The perspective you see the object from is how it’s going to be “rendered”.

Here’s what it should look like. You’re just looking at the object.

Step 3: The technical stuff

I say “technical” but it’s pretty basic.
Insert a camera into the model from step 1.

It’ll probably be greyed out but trust me, it’s going to work.
Screen Shot 2021-09-20 at 10.55.19 PM

It should look something like this, with the camera at the top:
Screen Shot 2021-09-20 at 10.55.05 PM

Now, you must set the camera’s name as “ThumbnailCamera”. It must be exactly how I wrote it. Same capitalization and no spaces.
Screen Shot 2021-09-20 at 10.56.32 PM

Now, in the command line, index the camera (look for it in the workspace). Autofill should help you if you don’t know how.

Basically, start out with workspace. then look for the model’s name, and then the camera. It should look something like this:
Screen Shot 2021-09-20 at 10.57.54 PM

Now, after ThumbnailCamera, type “.CFrame = workspace.CurrentCamera.CFrame” exactly how I wrote it. You don’t have to know what a CFrame is, just trust me.

So basically it should look like:

Now, press enter. It shouldn’t output any errors (red text), but if it does then it was very likely unsuccessful. Ensure you’ve put the proper names, capitalization and whatnot. If it’s still erroring, post a reply and I’ll help you out.

That’s it for the technical stuff.

Step 4: Upload the model

In the explorer, select your model, right click it, then press “Save to Roblox”. This button should be near the bottom:

After clicking Save to Roblox, this window should show up:

The icon in the top-right acts as a preview for the final “render” which is done by Roblox automatically. If you’re unhappy with the positioning of the item, you can just reposition your camera and paste the thing you wrote in the command line, no need to create a new camera.

You can overwrite an existing model, or create a new one. I like to call mine “ThumbnailModel” but it can really be whatever you want. Also note that things like particles won’t be rendered in this preview but will be in the final render (after the model is submitted).

Once you named it, press “Submit” in the bottom right.

Step 5: Saving the render

Now, click on the link in blue that’s on the “Successfully Submitted!” page.

It should take you to the model’s page:

Right click the image, then press “Save Image As…” and select a good location where you can easily retrieve the image.

Now, upload the image as a decal and you’re done. The final render should look something like this:
Png

Step 6: If you’re using a tool

If you’re using a tool, you can copy the image’s ID and paste it into the tool’s TextureId property.

That’s it. You took your tool from
Screen Shot 2021-09-20 at 11.13.33 PM
to
Screen Shot 2021-09-20 at 11.12.59 PM

I suppose it looks a bit small and I could have zoomed in a bit more but I think it gets the point across.

the end

36 Likes

Instead of having to upload the image as a decal (and risk moderation), I did something rather simple. You can thank the availability to third-party script executors and a few calls to this method.

http://roblox.com/Thumbs/Asset.ashx?assetId=%d&width=40&height=40

…pass into string.format with the asset ID as your numerical parameter. You’re also welcome to manually change the 40s to a more manageable size.

8 Likes

Only problem is that if you update the model (which I do just for convenience and organization purposes) it will show the wrong model which is why I prefer to save it to my computer. Nothing wrong with doing it your way though!

1 Like

If that model was only ever uploaded for the thumbnail, that issue is basically nullfied.

I’m confused. I usually overwrite the model instead of creating a new one. Maybe I misread the documentation but doesn’t your method take it straight from the site?

1 Like

I thought that your intent was just to upload the model solely for the thumbnail. I also failed to recognise that you’re the one who wrote the tutorial. The method I pointed to is only callable by CoreGuis, but I was able to retrieve a working URL format using third-party software.

1 Like

Ohh I get what you mean now. I made a single model to get the generated thumbnail which I overwrite then just save to a folder on my computer.

And yeah, exploits are meant to bypass any script security Roblox has, hence the ability to access the coregui.

1 Like

Controversial opinion: TextureID is actually the MOST overrated property.

Use a SurfaceAppearance.

Did you even read my post? It’s about the tool’s icon in the hotbar

4 Likes

Can this method be used to get a Thumbnail of a model without uploading it?
if yes, what should be put as assetId?

Thanks

1 Like

That’s what the post you replied to sought to answer. Yes, and the ID is the 11-or-so-digit number you see on the model’s catalogue page.

Hello, this is good but i don’t know if is just me or some of your tutorial images are missing
anyway thanks for this

Thanks for letting me know, think it might’ve happened after the outage months ago. Will put them back up eventually when I get time.

Do you know if the width and height have any impact on performance/loading speeds?

I could only infer that lower resolution denotes faster loading times, but I’m not certain on how scaling affects performance.

1 Like

i was wondering if its possible to do something like this without image editor.
13.09.2022_13.02.31_REC
maybe whit a spotlight.
Thanks

Late response but set its material to neon before uploading it to Roblox.