Creating GIFs From Ingame Sprites.

So today DFK added a bunch of new NPC character sprites to the game. I’ll do a post on that at some point, but I wanted to write this down so I didn’t forget how I did it.

The gifs themselves aren’t actually saved, the files that are in the game are actually “sprite sheets” – single images with every frame of the animation included.

Okay, let’s find one that we want to capture…

Let’s click on Arnold in the Alchemist. He’s new. Right click+Inspect should bring up this window:

We have to expand each of those arrows to try to find the right div block. If you click an animation, it’ll show you all of the different div blocks and it’s a pain to go through them but you’ll eventually find the one you’re looking for.

Which will open up the image in a new window, from where you can save it down like any other image. But, as you can see from the file information, it has an intrinsic size of 192×46 pixels. The game will then render that png at a ranging resolution, depending one whether you’ve zoomed in or out of the game.

Personally, I then use Photoshop to increase these file sizes by 400%. In doing so, I have to use the following settings:

If I don’t use the ‘Nearest Neighbor’ setting, when I increase the size of the image, it looks like this:

Which is weird AF. Don’t do this.

The other thing I take note of at this point is the number of frames (six), and the larger dimensions. To get the frame width, I take the width of the image and divide it by that number, so in this case it’s 768/6=128. So each frame is 128×184 for this enlarged image.

So then I go to this website:

https://onlinegiftools.com/convert-sprite-sheet-to-gif

Then it’s just a case of entering the information here:

And once the frame size is set I just change the “Delay between frames (millisecs)” until I’m happy with the speed of the gif.

And, voila!

Leave a Reply

%d bloggers like this: