I'm currently working on this project where there are animated faces rather than the dynamic ones Roblox have made. Any ideas?

I am currently working on a project where there and Animated faces rather than Dynamic Faces, and I have no clue what I should make. Any ideas?

Hey! How are you?

For starters, there are several ways to do this, such as creating a module that contains a large number of separate images with information such as how fast they should play in frames per second, thus forming a kind of gif that you can loop for every facial expression you want for your characters. This method is fine, but I believe it is resource intensive and therefore not feasible in most cases.

The method I would probably use to create this feature would be from the SurfaceGui and the ImageLabel, the reason for this would be due to the fact that with the ImageLabel you can “crop” an image and define which part you want to appear in the image so you can create a diverse amount of facial expressions with a little less than a few lines of code, you just need to cut the image correctly and define, through a script, which positions of each facial expression and how they should be reproduced.

image

ImageRectOffset defines the position where the image should appear, since ImageRectSize is the size of the area where the image will be assembled from the position (ImageRectOffset).

Wait. So you mean like you have a sprite sheet of an image and you crop it to whatever you want and make animations, so that you can upload less images?

Yes. Basically you can create an image of size 200x100 pixels in which the first 100x100 will be an animation sprite and the other pixels will be the next sprite, so just set the ImageRectSize to (100, 100) and set the ImageRectOffset position to (0, 0) or (100, 0).

I am trying to do this, but it’s not working. The cropping is now working and I don’t know why.

“FaceMove” in StarterCharacterScripts:

script.Parent.Head.face:Destroy()
local gui = Instance.new('SurfaceGui')
gui.Parent = script.Parent.Head
gui.Name = 'face'
local image = Instance.new('ImageLabel')
image.Parent = gui
image.Name = 'face'

image.Image = 'rbxassetid://12175905073'
image.ImageRectSize = Vector2.new(420, 420)

--Blinking
while true do
	image.ImageRectOffset = Vector2.new(20, 0)
	wait(math.random(4,8))
	image.ImageRectOffset = Vector2.new(360, 0)
	wait(0.2)
	image.ImageRectOffset = Vector2.new(750, 0)
	wait(0.2)
	image.ImageRectOffset = Vector2.new(360, 0)
	wait(0.2)
end

Edit: 3rd RectOffset was RectSize by accident

I believe you made the ImageRectSize the full size of the image, so instead of showing just an area of ​​the image that would be a sprite, it’s showing everything.

My face’s resolution for every frame is 420x420px

Then make the next image position 420 pixels away.

image.ImageRectOffset = Vector2.new(420, 0)

By the way, don’t forget that the image you’re using it on must contain the faces next to each other and that your ImageLabel must have the same properties as shown in the screenshot I sent you.

Also leave the background transparency at 1 so that only the image is shown.

image.BackgroundTransparency = 1