hakowork/rojo
3
0
Fork 0
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-10-25 04:54:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
rojo/.cursor/rules/roblox/en-us/parts/textures-decals.md
Joe b47eef1173 Add live syncback functionality and optimize service encoding 
- Introduced a new endpoint `/api/syncback` for one-click full sync from Roblox Studio to the filesystem, eliminating the need for an active WebSocket connection.
- Implemented `SyncbackRequest` and `ServiceChunk` structures to handle service-level properties and child instances during syncback.
- Enhanced `encodeService` to include ObjectValue carriers for accurate reference handling and prevent data loss.
- Updated the syncback process to utilize Luau-style relative paths for reference attributes, improving path management and consistency.
- Integrated session caching in the matching algorithm to optimize performance during syncback operations.

These changes significantly improve the live syncback experience, ensuring reliable data synchronization and enhanced performance during development.
2026-02-18 22:34:52 -06:00

8.8 KiB
Raw Blame History

title description
Textures and decals Textures and decals are images you can place on object surfaces.

A Class.Texture is an image you can place on any face of a part or union that repeats both horizontally and vertically on the size of the surface. In contrast, a Class.Decal is an image that stretches to fit the area of a part or union's surface. After you add a Class.Texture or Class.Decal object to a part or union, you can:

  • Change the texture or decal Class.Decal.Color3|Color3 property to set a color tint using RGB color codes.

  • Change the texture or decal Class.Decal.Transparency|Transparency property to a value between the default of 0 (fully visible) and 1 (invisible).

  • For a texture, set its scale and offset.

An example texture image of a light blue hexagon on top of a dark blue background.
Texture image
The same texture repeated eight times on a block part.
Texture applied to a part (repeating)
An example decal image of a light purple hexagon on top of a dark purple background.
Decal image
The same decal stretched on a block part.
Decal applied to a part (stretched)

Create textures or decals

To create a texture or decal, you must add either a Class.Texture or Class.Decal object to a part or union. You can import images for textures and decals to Studio for use between experiences, and distribute them to the Creator Store. Once you import the image, Studio assigns it a unique asset ID.

Every texture or decal image that you create and import to Roblox must adhere to the Community Rules and Terms of Use.

To add a texture or decal to a part or union:

  1. In the Explorer window, add a Class.Texture or Class.Decal to the part or union. An empty texture or decal object displays on the part or union with orange outlining.

  2. In the Properties window, navigate to the Class.FaceInstance.Face|Face property and choose a face (Enum.NormalId|Top, Enum.NormalId|Bottom, Enum.NormalId|Front, Enum.NormalId|Back, Enum.NormalId|Left, or Enum.NormalId|Right).

    • To assist in choosing the correct face, right-click the part/union and select Show Orientation Indicator. This displays a circle 🅕, a blue line attached to the object's front face, and a green arrow that points in the direction of the object's top face.

  3. Select the Class.Decal.ColorMapContent|ColorMapContent property and apply an image through any of the following methods:

    • Select any texture or decal you've uploaded previously.
    • Enter an asset ID into the field.

  4. Set a color tint by clicking the small box to the left of the Class.Decal.Color3|Color3 property or by entering a RGB color code.

    A close of view of the Color3 property with the small color box highlighted. A close of view of the Color3 property with the RGB code highlighted.
    A block part with a repeating blue hexagon texture on its top face.
    `Class.Decal.Color3|Color3`: [255, 255, 255]
    The same block part with a repeating hexagon texture on its top face, but the hexagons are pink against on dark purple background.
    `Class.Decal.Color3|Color3`: [255, 0, 100]

  5. Set the Class.Decal.Transparency|Transparency property to any value between the default of 0 (fully visible) and 1 (invisible).

    A block part with a repeating blue hexagon texture on its top face.
    `Class.Decal.Transparency|Transparency`: 0
    The same block part with a repeating hexagon texture on its top face, but the hexagons are semi-transparent.
    `Class.Decal.Transparency|Transparency`: 0.6

Customize textures

Unlike decals, textures provide further functionality to scale, offset, and animate the source image.

Scale textures

The size of the part doesn't affect the texture. Instead, scaling a part only increases or decreases the number of times the texture repeats.

The Class.Texture.StudsPerTileU|StudsPerTileU and Class.Texture.StudsPerTileV|StudsPerTileV properties determine the size of each "tile" in studs. Class.Texture.StudsPerTileU|StudsPerTileU determines the texture's horizontal size while Class.Texture.StudsPerTileV|StudsPerTileV determines the texture's vertical size.

Texture on a surface of 8x6 studs with size of each tile in 2x2. Texture on a surface of 8x6 studs with size of each tile in 4x4.

Offset textures

If you want more control over a texture's position, offset the texture by adjusting the Class.Texture.OffsetStudsU|OffsetStudsU (horizontal) and Class.Texture.OffsetStudsV|OffsetStudsV (vertical) properties. This is also helpful for animation.

2x2 texture on a surface of 8x6 studs with no offset. 2x2 texture on a surface of 8x6 studs with offset of 0.5x0.5 studs.

Animate textures

Using Class.TweenService, you can tween texture properties like Class.Texture.OffsetStudsU|OffsetStudsU and Class.Texture.StudsPerTileV|StudsPerTileV to achieve animated surfaces. For example, if you apply two fog textures to one container and animate them with the following script, you can achieve the appearance of a layered moving fog.

Two animated textures near the floor to simulate a moving fog effect
local TweenService = game:GetService("TweenService")

local texture1 = script.Parent.Texture1
local texture2 = script.Parent.Texture2

local tweenInfo1 = TweenInfo.new(8, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1)
local tween1 = TweenService:Create(texture1, tweenInfo1, {OffsetStudsV=50})
local tweenInfo2 = TweenInfo.new(7, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true)
local tween2 = TweenService:Create(texture2, tweenInfo2, {OffsetStudsU=50, StudsPerTileU=55, StudsPerTileV=45})

tween1:Play()
tween2:Play()