So I got bored one day and asked ziin the same thing. It was long and boring so I'll simplify it. And if you're sat there saying "oh I cba"; trust me the end results are satisfying!
If you want an animated PNG like me and ziin online with a static png in-game you MUST have an APNG add-on for your browser in order for it to read APNG files. APNG files come with the normal *.png extension but they are coded a bit differently. Some browsers may come with APNG compatibility built in.
EDIT: Here is a browser support table taken from Wikipedia.
Step 1. Make sure you have APNG support for your browser.
Test it using this.
Step 2. Download this program and put it into a new folder in your desktop.
Step 3. Create frames for your APNG as shown here~
Note: the frames I'll be using are highlighted in blue. We won't need to worry about the output.png until later.
Step 4. Hold Windows Key + R and type cmd and press enter.
Step 5. Type "cd" followed by the directory of the folder with all the frames and the *.exe in it. (e.g. cd Desktop\New Folder) . Press enter.
You should see this~
Step 6. Next make sure you have all the needed frames before continuing. YOU MUST NAME THE FRAMES "frame001.png, frame002.png, etc."
Step 7. Inside of the command prompt type "apngasm output.png frame001.png 1 10 /f" This must be done exactly as typed. Then press enter.
EDIT: And for any of you tech-savvies out there, you can use these command lines to customize the way your APNG is made~
Step 8. DON'T DO ANYTHING UNTIL YOU SEE THIS SCREEN~
Step 9. Change your current avatar image to the "output.png" file found in the same folder we've been using for this whole tutorial.
Thanks for reading
One, last thing, you may be wondering why your frames were 100+kb all together but then ~88kb once you have got your output.png.
(~88kb is small enough for osu!web). This is becuase when the program stores all the PNG images in one; it manages to compress them all to fit together. Neat, eh?
I just want to thank ziin for helping me do this in the first place
Any queries? You can either post in this thread or PM me!
Remember that your first frame will only show in-game or to anyone online. But if anyone is online and they have APNG support, then they'll only see frame 2 and over (as the first frame in the animation is skipped). As a result, you can have a static avatar AND an animated one, and they can be different pictures!
EDIT: Any existing GIFs? Use this to convert them to separate PNG frames!
Byeeee~
If you want an animated PNG like me and ziin online with a static png in-game you MUST have an APNG add-on for your browser in order for it to read APNG files. APNG files come with the normal *.png extension but they are coded a bit differently. Some browsers may come with APNG compatibility built in.
Chrome users have to download an add-on, just like me.
And I think Firefox comes built-in with it, I'm not sure. This is shown next to the tools button displaying how many APNGs are on the current web page.
EDIT: Here is a browser support table taken from Wikipedia.
Step 1. Make sure you have APNG support for your browser.
Test it using this.
Step 2. Download this program and put it into a new folder in your desktop.
Step 3. Create frames for your APNG as shown here~
Note: the frames I'll be using are highlighted in blue. We won't need to worry about the output.png until later.
Step 4. Hold Windows Key + R and type cmd and press enter.
Step 5. Type "cd" followed by the directory of the folder with all the frames and the *.exe in it. (e.g. cd Desktop\New Folder) . Press enter.
You should see this~
Step 6. Next make sure you have all the needed frames before continuing. YOU MUST NAME THE FRAMES "frame001.png, frame002.png, etc."
Step 7. Inside of the command prompt type "apngasm output.png frame001.png 1 10 /f" This must be done exactly as typed. Then press enter.
EDIT: And for any of you tech-savvies out there, you can use these command lines to customize the way your APNG is made~
Step 8. DON'T DO ANYTHING UNTIL YOU SEE THIS SCREEN~
Step 9. Change your current avatar image to the "output.png" file found in the same folder we've been using for this whole tutorial.
Thanks for reading
One, last thing, you may be wondering why your frames were 100+kb all together but then ~88kb once you have got your output.png.
(~88kb is small enough for osu!web). This is becuase when the program stores all the PNG images in one; it manages to compress them all to fit together. Neat, eh?
I just want to thank ziin for helping me do this in the first place
Any queries? You can either post in this thread or PM me!
Remember that your first frame will only show in-game or to anyone online. But if anyone is online and they have APNG support, then they'll only see frame 2 and over (as the first frame in the animation is skipped). As a result, you can have a static avatar AND an animated one, and they can be different pictures!
EDIT: Any existing GIFs? Use this to convert them to separate PNG frames!
Byeeee~