Items Images System

Hello:
I want to do an inventory system.
I can manage well the data saving, UI Layout and scripting in general, but the point Is that I want an image to appear for each item.
For that, I have 2 ideas:

  • Using a ViewportFrame: I necesarily have to make a model for the object (for other parts of the game), so a viewport frame would be an ideal solution, but the game may need to instantiate a lot of item frames, what includes lot of viewport frames, and I don’t know how well that can affect the performance.
  • Using an EditableImage: If there was a way of making roblox get a screenshoot from a viewport frame or somewhere else, I could just make a viewportFrame and take a “photo” of each item, but I think that there isn’t any way of doing this.
  • Using a normal ImageLabel: If none of the other 2 options is feasible, I would make a new image for each item and just publish it, but I hope that any of the other 2 solutions is better.

If anyone could inform me about the performance of multiple viewport frames or any way of taking a “screenshot” of the screen for the item photo, I would thank it.

Unfortunately, Roblox doesn’t support direct screenshots from ViewportFrames. Your best option might be to manually create images for each item and use ImageLabels to keep performance smooth.

It’s tedious but it works great performance-wise.

When it comes to viewport frames it’s good to use simplified versions of the original models as a preview. For example you can remove small textures or simplify them, remove parts that aren’t visible or are small, remove instances that wont be rendered(for example scripts, joints, etc). Also you can get a big performance boost by removing physics, collisions, touch listening and shadows from all the parts being rendered.

In general you should ask yourself “How much can I simplify this item so it doesn’t change the preview of it”.

The reason you can do a ton of optimization for viewport frames stems from three facts regarding them:

  1. The image will likely be very small, making small details hard to notice
  2. Only one side of the model will be shown, making the other side unnecessary
  3. The image will be likely not moving, meaning you don’t need any physics calculations