How to make a moving checkerboard background

[WatchDogsPlayz (Watch)]

I was wondering how to make my checkerboard background move in the background. I know i could just make the size of the image bigger using CFrame but there has to be a better way to animate it so I don’t have to stretch the frame out just to make it looked animated. Heres the checkerboard i want to look animated (i want the checkerboard to be moving up and to the right if you understand what i mean)

[kh_834 (sisyphus)]

I think you could use ImageRectOffset and set the ScaleType to Tile.

Edit: I found something that could help.

How to make moving UI effects

You would be tweening the Position property of an image based on its TileSize. Grab an image you want to tile, figure out its pixel dimensions. One I’ve made used a 52x52 icon, so I’ll use 52 as an example: Set the images’ texture to what you want to tile. Set its ScaleType to “Tile” with its TileSize property to {0, 52, 0, 52}. Set the images’ Size to {1, 52, 1, 52}. This will make it as big as its parents’ frame and 52 pixels larger, which will be necessary. Set the ImageLabel’s Parent’s Cli…

[HolisThaDev (holis)]

@WatchDogsPlayz

I was wondering how to make my checkerboard background move in the background. I know i could just make the size of the image bigger using CFrame but there has to be a better way to animate it so I don’t have to stretch the frame out just to make it looked animated. Heres the checkerboard i want to look animated (i want the checkerboard to be moving up and to the right if you understand what i mean)

To create an animated checkerboard background that moves up and to the right, you can use a combination of a texture and a script that updates the texture’s offset property over time.

First, create a part to serve as the background and apply the checkerboard texture to it. You can do this using the following code:

-- Create a part to serve as the background
local background = Instance.new("Part")
background.Size = Vector3.new(30, 0.1, 30) -- set the size of the part
background.Position = Vector3.new(0, 3, 0) -- set the position of the part
background.Parent = workspace

-- Create a texture for the checkerboard pattern
local checkerboardTexture = Instance.new("Texture")
checkerboardTexture.Name = "CheckerboardTexture"
checkerboardTexture.Texture = "rbxassetid://70342370" -- replace with your own texture asset id
checkerboardTexture.Face = Enum.NormalId.Top -- apply the texture to the top face of the part

-- Apply the texture to the part
local surfaceGui = Instance.new("SurfaceGui")
surfaceGui.Face = Enum.NormalId.Top -- apply the surface gui to the top face of the part
surfaceGui.Parent = background

local imageLabel = Instance.new("ImageLabel")
imageLabel.Size = UDim2.new(1, 0, 1, 0)
imageLabel.BackgroundTransparency = 1
imageLabel.Image = "rbxasset://textures/blank.png"
imageLabel.ImageColor3 = Color3.new(1, 1, 1)
imageLabel.Parent = surfaceGui
imageLabel.Image = checkerboardTexture.Texture

This code creates a part to serve as the background, creates a texture for the checkerboard pattern, and applies the texture to the top face of the part using a SurfaceGui and an ImageLabel.

Next, you can create a script that updates the offset of the texture over time to create the appearance of movement. Here’s an example script:

-- Get the checkerboard texture
local checkerboardTexture = game.Workspace.Part.SurfaceGui.ImageLabel.CheckerboardTexture

-- Set the speed of the animation (adjust as desired)
local speed = 0.5

-- Update the offset of the texture every frame
game:GetService("RunService").RenderStepped:Connect(function(deltaTime)
    local offset = checkerboardTexture.Offset
    offset = offset + Vector2.new(deltaTime * speed, deltaTime * speed)
    checkerboardTexture.Offset = offset
end)

This script gets the checkerboard texture from the background part, sets the speed of the animation, and updates the texture’s offset property every frame using a RenderStepped connection. The offset is incremented by a small amount each frame to create the appearance of movement.

You can adjust the speed of the animation and the size of the background part to achieve the desired effect.

[kh_834 (sisyphus)]

this is way too complicated for what it actually is doing lol

also I doubt you would have to include the entire script of making it