Canvas Instance or Texture

Feature Requests Engine Features
,
#1

The issue

It is currently impossible to draw actual pixel data to the UI on Roblox. Right now we are stuck with using colored frames to represent rectangles and image labels to represent any shapes more complex than that.

This is usually fine for UI! But there are also often use cases that require some more control over what is displayed on screen. For any case where we want to be able to draw our own pixel data to the UI, we have to rely on libraries created by other developers that use many tricks to achieve this.

The only choice we have for rendering our own pixel data is by creating tons of frames or parts. Currently, the most optimized solutions we have usually involve using UI gradients in frames to render individual pixels. This, however, still requires many instances which very quickly slows down performance. These solutions are often unusable in actual games.

Use cases

This is an issue that many developers have worked on trying to solve for many years, due to the lack of a native solution. There are many, many use cases for a UI element which developers can draw pixels to:

  • Falling sand game! Due to the current limitations, this isn’t possible without many compromises and poor performance.
  • Dynamic mini-maps. Dynamically generating mini-maps in game is very expensive, and rendering a new image of the map each time a change is made (what developers currently have to do) is very time consuming.
  • 2D games. If someone wants to create a 2D game on Roblox, they have to fake it with 3D for good performance. This can be a challenging, and is usually not convincingly 2D. With complex 2D games made using the current UI elements, there is often performance issues due to the constant refreshing of many UI elements.
  • Better solution for drawing games, which currently usually use parts. This would allow for the creation of more detailed drawing tools or games.
  • Interesting dynamically generated effects, such as splatter effects rendered onto surface GUIs.

CanvasRenderingContext2D

A wonderful example of a canvas element is the web’s <canvas> element and it’s CanvasRenderingContext2D. It has a great API for developing games or applications on the web with the canvas element, including functions for drawing basic shapes (such as rectangles, arcs, lines, etc.) and the ability to give the canvas element an array of pixel data. I believe an implementation like this could work very well on Roblox.

50 Likes
#2

I’ve recently ran into a need for this feature or something similar once again, in an attempt to work on another 2D game.

The lack of support for drawing to a texture, whether that be a UI instance or otherwise, makes a lot of potential games (in my case, a falling sand game previously and now a scrolling procedurally generated platformer) or effects, nearly impossible to render with playable performance.

I would find a UI canvas instance, or even canvas texture, extremely useful, and believe that it would open a lot of doors to creative 2D games or effects or similar on the platform!