Fixing "jitter" issue in 2D game

Right now I have this 2D game that supports a grid based world. I am trying to figure out how to fix this odd issue.

Below is a video of the issue. Notice how it jitters (the video quality itself is bad, but you should be able to see the issue)

This is the script I am using

local size = 1.2 
local width = 14
local height = 12
local grid = require(game:GetService("ReplicatedStorage").VolumeGrid)
local frames = grid.new()
local world = grid.new()
local center = script.Parent.center

local cellsizeX = center.AbsoluteSize.X*(1.2/width)
local cellsizeY = center.AbsoluteSize.Y*(1.2/height)

for x = 0,width do 
	for y = 0,height do 
		local img = Instance.new("ImageLabel")
		img.Size = UDim2.fromScale(1.2/width,1.2/height)
		img.BorderSizePixel = 0
		img.BackgroundColor3 = BrickColor.Random().Color
		img.Position = UDim2.fromScale(1.2/width*x,1.2/height*y)
		img.Parent = script.Parent.center
		frames[x][y] = img 
	end
end

for x = -200,200 do 
	for y = -200,200 do 
		world[x][y] = Color3.fromHSV(1,0,math.abs((math.sin(x)+math.cos(y))/2))
	end
end

local offX = workspace.x.Value
local offY = workspace.y.Value 

local function update()
	center.Position = UDim2.new(.5-((offX%(1/cellsizeX))),0,.5-((offY%(1/cellsizeY))))
	for x = 0,width do 
		for y = 0,height do 
			local img = frames[x][y]
			img.BackgroundColor3 = world[math.round(offX)+x][math.round(offY)+y]
		end
	end	
end

workspace.x:GetPropertyChangedSignal("Value"):Connect(function()
	offX = workspace.x.Value
	update()
end)

workspace.y:GetPropertyChangedSignal("Value"):Connect(function()
	offY = workspace.y.Value
	update()
end)

local keys = {
	["W"] = false,
	["A"] = false,
	["S"] = false,
	["D"] = false,
}

game:GetService("UserInputService").InputBegan:Connect(function(io)
	if keys[io.KeyCode.Name] ~= nil then 
		keys[io.KeyCode.Name] = true
	end
end)

game:GetService("UserInputService").InputEnded:Connect(function(io)
	if keys[io.KeyCode.Name] ~= nil then 
		keys[io.KeyCode.Name] = false
	end
end)

while true do 
	task.wait()
	if keys.W then 
		workspace.y.Value+=.25
	elseif keys.S then 
		workspace.y.Value-=.25	
	elseif keys.A then 
		workspace.x.Value-=.25
	elseif keys.D then 
		workspace.x.Value+=.25
	end
end

The main issue is at these two lines

center.Position = UDim2.new(.5-((offX%(1/cellsizeX))),0,.5-((offY%(1/cellsizeY))))
-- Cell size is the absolute size of each image 
img.BackgroundColor3 = world[math.round(offX)+x][math.round(offY)+y]

I have absolutely no idea how to fix this. Heres the place file if you need it
2d game.rbxl (34.5 KB)
(The value objects are just for debugging, I will remove them once i fix the issue)

i think it is now fixed

2d game.rbxl (34.8 KB)

1 Like

Unfortunately, this did not work. Thanks for trying though.