How to make 2D rect animation using XML file

[robloxtema123]

Hello, guys!!!
I’m need you’re help. Im trying to make game, like a Friday Night Funkin, but im can’t figure out, how make normal animation using XML file with this Image
Do you have any ideas?
(actually size of this image 1024x1024, but size before 8192x8192)

There XML file:
pinkie.xml (24.4 KB)

[Scottifly]

Do you mean with a ParticleEmitter Flipbook?

[robloxtema123]

no, im mean 2D animation to ImageLabel

[3YbuKtOp (Alex_Kornilov)]

Perhaps this will help you

How to load a Sprite (Animated Gif) in a roblox Gui (A sequel to "Gifs in roblox with only 1 image")

This is an updated version of my Previous Thread, in which I described how to make a gif using textures and texture offsets, this is both a tutorial and a resource, much like the previous post, so I will be making the post here, like the previous post Additional notes: This is an example resource showing you how to do this, not necessarily how you should do it. If you have a better way to load or animate Spritesheets, do it, this was not built for performance. Hello, recently people have bee…

Gifs in Roblox with only 1 image

For anybody looking to do this with GUIs/ImageLabels, I have made an updated thread Hello! Recently texture offsets were added to the game, since this addition I have used this new feature to convert gifs into spritesheets for animation! Today I would like to showcase this creation and give it to you to use as well! [Roblox 2019 07 24 14 01 20] Now you may be thinking: “But aren’t there already gifs on roblox?” and you’d be semi-right The old way of uploading gifs required you …

[robloxtema123]

no it doesn’t help
im need help with this XML

[Scottifly]

It seems that your .xml file isn’t organized into panels. I’m not sure if that’s a big issue with what you’re trying to do.

[robloxtema123]

what do you mean? im dont get it

[Electrizing]

it needs to be like symmetrical (like the “R” roblox logo images in this picture)

basically next to each other in a table

[Scottifly]

If you look at the images in the link I sent about flipbooks it shows an example, like @Electrizing showed.
The images in your .xml file aren’t in a grid, they just seem to be thrown together.

I could be way off base though because I’ve never done anything like this.

[7z99 (cody)]

Well first thing would probably be to split your xml file into different categories depending on what animation it should belong to. In your case it appears you have 11 so I’ll start out by writing all of those out.

Note that since you resized your image the rect size and offsets may not be pixel perfect.

Anyway we can do it by using a giant string pattern to match each of the lines to convert the XML stuff to a Lua table:

local xmlData = [[your XML file (truncated to make this not be a giant post)]]

local luaXMLData = {}

xmlData = xmlData:split('\n') -- split into separate lines so it's easier to work with

local function bulkToNumber(...: any) -- utility function for bulk converting entries to numbers
	local packedEntries = { ... }
	for index, entry in packedEntries do
		packedEntries[index] = tonumber(entry) or entry
	end
	return unpack(packedEntries)
end

for _, line: string in xmlData do
	local spriteName, emoteName, emoteFrame, pixelStartX, pixelStartY, width, height, frameX, frameY, frameWidth, frameHeight = bulkToNumber(line:match('<SubTexture name="(%w+)%s(%a+)(%d+)"%sx="(%d+)"%sy="(%d+)"%swidth="(%d+)"%sheight="(%d+)"%sframeX="(%-?%d+)"%sframeY="(%-?%d+)"%sframeWidth="(%d+)"%sframeHeight="(%d+)"'))
	if not spriteName or not emoteName or not emoteFrame then -- this line isn't valid so continue
		continue
	end
	
	local dataThisSprite = luaXMLData[spriteName]
	
	if not dataThisSprite then -- if sprite data doesn't exist for this sprite, make a new entry in luaXMLData
		luaXMLData[spriteName] = {}
		dataThisSprite = luaXMLData[spriteName]
	end
	
	local emoteNameEntry = dataThisSprite[emoteName]
	if not emoteNameEntry then -- if emote data doesn't exist for this frame, make a new entry
		dataThisSprite[emoteName] = {}
		emoteNameEntry = dataThisSprite[emoteName]
	end
	
	dataThisSprite[emoteName][emoteFrame + 1] = { -- we need to add 1 because XML uses 0-based indexing and Lua uses 1-based indexing
		topLeftCorner = Vector2.new(pixelStartX, pixelStartY) / 8; -- because your XML file was generated for an 8096x file and we're working with a 1024x one, divide by 8
		size = Vector2.new(width, height) / 8;
		frameOffset = Vector2.new(frameX, frameY) / 8;
		frameSize = Vector2.new(frameWidth, frameHeight) / 8
	}
end

print(luaXMLData) --[[
	table laid out as:
	{
		[spriteName] = {
			[emoteName] = {
				[frameNumber] = {
					topLeftCorner = Vector2(x, y);
					size = Vector2(width, height);
					frameOffset = Vector2(frameX, frameY);
					frameSize = Vector2(frameWidth, frameHeight)
				}
			}
		}
	}
]]

-- now that we have everything laid out we can start animating our sprite

local containingFrame = Instance.new('Frame')
containingFrame.Position = UDim2.fromScale(0.5, 0.5)
containingFrame.AnchorPoint = Vector2.new(0.5, 0.5)
containingFrame.Parent = script.Parent

local imageLabel = Instance.new('ImageLabel')
imageLabel.Image = 'rbxassetid://13373402216';
imageLabel.Parent = containingFrame

local animInfo = luaXMLData.pinkie.hello

while true do
	for i = 1, #animInfo do
		local animInfoThisFrame = animInfo[i]
		
		local frameSize = animInfoThisFrame.frameSize
		containingFrame.Size = UDim2.fromOffset(frameSize.X, frameSize.Y)
		
		local size = animInfoThisFrame.size
		imageLabel.ImageRectSize = size
		imageLabel.ImageRectOffset = animInfoThisFrame.topLeftCorner
		
		imageLabel.Size = UDim2.fromOffset(size.X, size.Y)
		
		local imageOffset = -animInfoThisFrame.frameOffset -- we want to inverse due to our hierarchy
		imageLabel.Position = UDim2.fromOffset(imageOffset.X, imageOffset.Y)
		
		task.wait(.1)
	end
end

[robloxtema123]

Thank you!
This is really useful!