EditableImage
EditableImage allows for the runtime creation and manipulation of images.
To create a blank EditableImage, use AssetService:CreateEditableImage(). To create an EditableImage from an existing image, use AssetService:CreateEditableImageAsync().
EditableImage can be used in any Content property which takes an image, such as ImageLabel.ImageContent or MeshPart.TextureContent. This is done by setting the content property to Content.fromObject(editableImage).
The EditableImage coordinate system is relative to the top left of the image:
- Top-left: (0, 0)
- Bottom-right: (Size.X - 1, Size.Y - 1)
When you use AssetService:PromptCreateAssetAsync() to publish an object that has a Content property which references an EditableImage, the editable image is published as an image and the property is set to a new asset ID.
Update Limitations
Only a single EditableImage can be updated per frame on the display side. For example, if you update three EditableImage objects which are currently being displayed, it will take three frames for all of them to be updated.
Enabling EditableImage for Published Experiences
For security purposes, using EditableImage fails by default for published experiences. To enable the use of EditableImage, you must be 13+ age verified and ID verified. After you are verified, open Studio. Select File > Game Settings > Security and enable the Allow Mesh & Image APIs toggle. Remember to review the Terms of Use before enabling the toggle.
Permissions
To prevent misuse, AssetService:CreateEditableImageAsync() only allows you to load and edit image assets:
- That are owned by the creator of the experience (if the experience is owned by an individual).
- That are owned by a group (if the experience is owned by the group).
- That are owned by the logged in Studio user (if the place file has not yet been saved or published to Roblox).
The APIs throw an error if they are used to load an asset that does not meet the criteria above.
Summary
Methods
- DrawCircle(center : Vector2,radius : number,color : Color3,transparency : number,combineType : Enum.ImageCombineType):()
Draws a circle at the specified point.
Draws another EditableImage into this EditableImage at the given position.
Projects another EditableImage into an EditableMesh and stores the result on this EditableImage.
- DrawImageTransformed(position : Vector2,scale : Vector2,rotation : number,image : EditableImage,options : Dictionary?):()
Draws an image into this EditableImage with transformations including scaling and rotation, placing it at the specified position.
Draws a line between two provided points.
- DrawRectangle(position : Vector2,size : Vector2,color : Color3,transparency : number,combineType : Enum.ImageCombineType):()
Draws a rectangle of the given size at the given top-left position.
Reads a rectangular region of pixels into a buffer.
Writes a rectangular region of pixels into the image.
Properties
Size
Size of the EditableImage in pixels. The maximum size is 1024×1024. An EditableImage cannot be resized; this property is read-only. In order to resize or crop an image, create a new EditableImage and use DrawImageTransformed() to transfer the contents; then call Destroy().
Methods
Destroy
Destroys the contents of the image, immediately reclaiming used memory.
Returns
DrawCircle
Draws a circle at the specified point on the EditableImage. If the circle is semi-transparent, it will be blended with the pixels behind it using source over blending.
Parameters
Center of the circle, relative to the top-left corner of the EditableImage. Positions outside the canvas bounds are allowed.
Radius of the circle in pixels.
Color of the circle.
Transparency of the circle with 0 being fully opaque and 1 being fully transparent.
How the pixels of the source image are blended with the pixels of the added image.
Returns
DrawImage
Draws another EditableImage into this EditableImage at the given position. Positions outside the canvas bounds are allowed such that only part of the new image is drawn.
Parameters
Position at which the top-left corner of the added image will be drawn.
The EditableImage to draw into this EditableImage.
How the pixels of the source image should be blended with the pixels of the added image.
Returns
DrawImageProjected
Projects another EditableImage into an EditableMesh and stores the result on this EditableImage by using the specified projection and brush configuration.
Parameters
The EditableMesh used to project into.
Projection configuration dictionary including the following key-value pairs:
Brush configuration dictionary including the following key-value pairs:
- AlphaBlendType (Enum.ImageAlphaType) which determines how this projection will blend alpha values.
- ColorBlendType (Enum.ImageCombineType) which determines how this projection will blend color values.
- Decal (EditableImage) as the image used for projection.
- FadeAngle (number) as the angle in degrees for the projection edges to fall off.
- BlendIntensity (number) as the value between 0 and 1 which controls how much of the projection is blended into the resulting image.
Returns
DrawImageTransformed
This method lets you draw an EditableImage into this EditableImage with transformations applied, such as scaling and rotation. The position parameter specifies where the pivot point of the source image will be placed on this image after transformations. Positions outside the canvas bounds are allowed such that only part of the new image is drawn.
Parameters
Position in pixels where the pivot point of the source image will be placed on this image.
Scaling factors for the source image along the X and Y axes.
The rotation angle in degrees, applied around the pivot point of the source image.
The source EditableImage to be drawn into this image.
Optional dictionary for additional configuration:
- CombineType: Specifies how the pixels of the source image blend with those of the destination. Default is Enum.ImageCombineType.AlphaBlend.
- SamplingMode: Specifies the sampling method (e.g. Default for bilinear or Pixelated for nearest neighbor). Default is Enum.ResamplerMode.Default.
- PivotPoint: Specifies the pivot point within the source image for scaling and rotation. Default is the center of the source image (i.e. Image.Size / 2).
Returns
Code Samples
The following code draws a rotated and scaled image onto another.
local AssetService = game:GetService("AssetService")
-- Example of drawing a rotated and scaled image onto another EditableImage
local srcImage = AssetService:CreateEditableImage({ Size = Vector2.new(256, 256) })
local dstImage = AssetService:CreateEditableImage({ Size = Vector2.new(512, 512) })
-- Drawing with a rotation of 45 degrees, scaling by 2x, and placing at (100, 100)
dstImage:DrawImageTransformed(
Vector2.new(100, 100), -- Position
Vector2.new(2, 2), -- Scale
45, -- Rotation (degrees)
srcImage, -- Source image
{
CombineType = Enum.ImageCombineType.AlphaBlend, -- Optional, default is AlphaBlend
SamplingMode = Enum.ResamplerMode.Default, -- Optional, default is Default
PivotPoint = srcImage.Size / 2 -- Optional, default is center of the source image
}
)The following code shows how cropping an image can be done using the EditableImage:DrawImageTransformed() method.
local AssetService = game:GetService("AssetService")
-- Source image
local srcImage = AssetService:CreateEditableImageAsync(Content.fromUri(assetUri))
-- Crop area defined by offset and size
local cropOffset = Vector2.new(50, 50)
local cropSize = Vector2.new(100, 100)
-- Destination image with size of the crop area
local dstImage = AssetService:CreateEditableImage({ Size = cropSize })
-- Position (top-left corner)
local position = Vector2.new(0, 0)
-- Scale factors (no scaling)
local scale = Vector2.new(1, 1)
-- Rotation angle (no rotation)
local rotation = 0
-- Draw the source image onto the destination image with adjusted pivot to crop the image
dstImage:DrawImageTransformed(
position,
scale,
rotation,
srcImage,
{
CombineType = Enum.ImageCombineType.Overwrite,
PivotPoint = cropOffset -- Set pivot point to cropOffset to start drawing from there
}
)DrawLine
Draws an anti-aliased line on the EditableImage one pixel thick between the two provided points.
Parameters
Start point of the line.
End point of the line.
Color of the line.
Transparency of the line.
How the pixels of the source image are blended with the pixels of the added image.
Returns
DrawRectangle
Draws a rectangle on the EditableImage of the given size at the given top-left position.
Parameters
Position of the top-left of the rectangle. Unlike other drawing methods, this cannot be outside the canvas bounds of the EditableImage.
Size of the rectangle to draw, in pixels.
Color of the rectangle.
Transparency of the rectangle.
How the pixels of the source image are blended with the pixels of the added image.
Returns
ReadPixelsBuffer
Reads a rectangular region of pixels from an EditableImage and returns it as a buffer. Each number in the buffer is a single byte, with pixels stored in a sequence of four bytes (red, green, blue, and alpha).
Note that this method uses alpha instead of transparency, unlike the EditableImage drawing methods.
Parameters
Top-left corner of the rectangular region of pixels to read.
Size of the rectangular region of pixels to read.
Returns
Buffer where each pixel is represented by four bytes (red, green, blue and alpha respectively). The length of the buffer can be calculated as Size.X * Size.Y * 4 bytes.
Code Samples
The following code reads two pixels from a EditableImage and creates a part with the average color between them.
local AssetService = game:GetService("AssetService")
local options = { Size = Vector2.new(32,32) }
local editableImage = AssetService:CreateEditableImage(options)
local pixelsBuffer = editableImage:ReadPixelsBuffer(Vector2.zero, Vector2.new(2, 1))
local color1 = Color3.fromRGB(buffer.readu8(pixelsBuffer, 0), buffer.readu8(pixelsBuffer, 1), buffer.readu8(pixelsBuffer, 2))
local transparency1 = (255 - buffer.readu8(pixelsBuffer, 3)) / 255
local color2 = Color3.fromRGB(buffer.readu8(pixelsBuffer, 4), buffer.readu8(pixelsBuffer, 5), buffer.readu8(pixelsBuffer, 6))
local transparency2 = (255 - buffer.readu8(pixelsBuffer, 7)) / 255
local averageColor = color1:Lerp(color2, 0.5)
local averageTransparency = (transparency1 + transparency2) / 2
local part = Instance.new("Part")
part.Color = averageColor
part.Transparency = averageTransparency
part.Parent = workspaceWritePixelsBuffer
Writes a rectangular region of pixels to an EditableImage from a buffer. Each number in the buffer is a single byte, with pixels stored in a sequence of four bytes (red, green, blue, and alpha).
Note that this method uses alpha instead of transparency, unlike the EditableImage drawing methods.
Parameters
Top-left corner of the rectangular region to draw the pixels into.
Size of the rectangular region of pixels to write.
A buffer where each pixel is represented by four bytes (red, green, blue, and alpha respectively). The length of the buffer should be Size.X * Size.Y * 4 bytes.
Returns
Code Samples
The following code reads the pixels of a EditableImage and writes back the inverted color values of those pixels.
local AssetService = game:GetService("AssetService")
local options = { Size = Vector2.new(32,32) }
local editableImage = AssetService:CreateEditableImage(options)
local pixelsBuffer = editableImage:ReadPixelsBuffer(Vector2.zero, editableImage.Size)
for i = 1, editableImage.Size.X * editableImage.Size.Y do
local pixelIndex = (i - 1) * 4
buffer.writeu8(pixelsBuffer, pixelIndex, 255 - buffer.readu8(pixelsBuffer, pixelIndex))
buffer.writeu8(pixelsBuffer, pixelIndex + 1, 255 - buffer.readu8(pixelsBuffer, pixelIndex + 1))
buffer.writeu8(pixelsBuffer, pixelIndex + 2, 255 - buffer.readu8(pixelsBuffer, pixelIndex + 2))
-- Set alpha to 255 to make all pixels fully opaque.
buffer.writeu8(pixelsBuffer, pixelIndex + 3, 255)
end
editableImage:WritePixelsBuffer(Vector2.zero, editableImage.Size, pixelsBuffer)