forum

How to make a static PNG in-game and an animated PNG online

posted
Total Posts
32
Topic Starter
FrozenOG
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.
Chrome users have to download an add-on, just like me.
This is shown next to the tools button displaying how many APNGs are on the current web page.
And I think Firefox comes built-in with it, I'm not sure.
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~
boat
You don't need to go through the hassle of saving all the frames individually if you don't mind the gif compression, just download one of those gif to apng converters.

Although the filesize compression changes depending on how well the gif frames compress in the png format.

Opera and firefox support APNG's by default.
Pokebis
Why is this in General Discussion?
Kitsunemimi
Nice detailed, yet concise tutorial. Though one thing to note, there are some apng editors out there with more robust features/more user friendly interface, as opposed to this command line version. Perhaps someone could write an extra section for a different apng editor.

failboat wrote:

You don't need to go through the hassle of saving all the frames individually if you don't mind the gif compression, just download one of those gif to apng converters.
Only problem is that .gif doesn't support full 8 bits of alpha channel.

Pokebis wrote:

Why is this in General Discussion?
Because it's a tutorial for creating apngs; not necessarily relevant to osu!.
Kyou-chan
thanks for the tutorial :3
Rena-chan
|: Get off my lawn.
Topic Starter
FrozenOG

Kyou-chan wrote:

thanks for the tutorial :3
Thanks! Glad I helped ;)
ampzz
In before a massive influx of APNG avatars pop up rendering my abuse of adblock to its limit.
Ephemeral
don't do it for strobing avatars like the OP, since those are just irritating and serve no aesthetic purpose whatsoever.
Topic Starter
FrozenOG

Ephemeral wrote:

don't do it for strobing avatars like the OP, since those are just irritating and serve no aesthetic purpose whatsoever.
I'm going to change it anyway ;)
Ephemeral
we're also dubious about allowing apngs - since we don't allow animated gifs, there's really no reason for us to allow apngs either
eldnl
ziin's avatar is the best
Vext_old

Ephemeral wrote:

we're also dubious about allowing apngs - since we don't allow animated gifs, there's really no reason for us to allow apngs either
But blinking Nyu is iconic Vext!
Topic Starter
FrozenOG

Ephemeral wrote:

we're also dubious about allowing apngs - since we don't allow animated gifs, there's really no reason for us to allow apngs either
Don't like it? Uninstall your APNG support for your browser. Problem solved.

GIF are allowed, but only online. If you use a URL of a GIF insted of using a file from your PC. Then it let's you use it.

Peppy said he didn't want to see animated GIF in osu! He didn't say they weren't allowed online. And this is it... Static in-game and animated online. As before, if you don't won't strobing avatars; fine; I changed it. But if there is an influx of APNG srtobing, then remove your APNG support. As I will be doing the same thing if osu! is over populated.

I only wrote this tutorial for people who wanted avatar like mine, blinking eyes, or anyother creative thing. And let's not moan; in the end we're all here for one thing together as a community. And that is to play, map, talk, and have fun.
IppE

Frozen wrote:

But if there is an influx of APNG srtobing, then remove your APNG support. As I will be doing the same thing if osu! is over populated.
What if my browser (like any decent browser tbh) comes with apng support by default?

Also on the page that you upload avatars it clearly says that only jpg and png formats are supported. The uploading a gif from an url is imo more like an exploit.
Quaraezha
I've been working on APNGs for a long time now. Just too lazy to upload my works since most browsers can't support it yet. Still waiting until Chrome supports APNGs by default.
Rena-chan

Quaraezha wrote:

I've been working on APNGs for a long time now. Just too lazy to upload my works since most browsers can't support it yet. Still waiting until Chrome supports APNGs by default.
So you're saying that you've been working on APNGs since before it was cool ?
Ephemeral

Frozen wrote:

peppy said he didn't want to see animated GIF in osu!
precisely.

i repeat: if animated images were allowed, agif support would be enabled. we're discussing this internally at the moment, so don't get your hopes up that it'll stay.
Topic Starter
FrozenOG

IppE602 wrote:

Frozen wrote:

But if there is an influx of APNG srtobing, then remove your APNG support. As I will be doing the same thing if osu! is over populated.
What if my browser (like any decent browser tbh) comes with apng support by default?

Also on the page that you upload avatars it clearly says that only jpg and png formats are supported. The uploading a gif from an url is imo more like an exploit.
I wouldn't know I don't use Firefox; I use Chrome.
Topic Starter
FrozenOG

Ephemeral wrote:

Frozen wrote:

peppy said he didn't want to see animated GIF in osu!
precisely.

i repeat: if animated images were allowed, agif support would be enabled. we're discussing this internally at the moment, so don't get your hopes up that it'll stay.
I'm talking about osu! in-game
Ephemeral
I'm not - that's the difference

There really isn't any point discussing this further. Like I said, animated avatar support has been turned off on these forums. Using APNG to bypass this is like IppE mentioned - an exploit. We're discussing this further internally as to whether we want this to continue or not.
Topic Starter
FrozenOG

Ephemeral wrote:

I'm not - that's the difference

There really isn't any point discussing this further. Like I said, animated avatar support has been turned off on these forums. Using APNG to bypass this is like IppE mentioned - an exploit. We're discussing this further internally as to whether we want this to continue or not.
If you don't mind me saying one last thing... I think people should use non-strobing avatars, but ones that are not annoying, like mine. And if someone disobeys the avatar rules, then their avatar privileges get taken away for a week~month.
Ephemeral
that's probably what'll end up happening, tbh
Topic Starter
FrozenOG

Ephemeral wrote:

that's probably what'll end up happening, tbh
Yai! (So with my current kitty avatar I won't get my avatar privileges taken off me?)

EDIT: OK. Continue usual thread...
dkun
this is why we can't have nice things
Topic Starter
FrozenOG

dkun wrote:

this is why we can't have nice things
wut?
awp
If we let people do things, there is a subset of those people who will do it wrong. Intentionally. And they will be the ones that get noticed. And they will ruin it for everyone else.

You give people a freedom, and they will abuse it.
Jarby
The only person that does animated avatars well around here is failboat anyway.
Topic Starter
FrozenOG

awp wrote:

If we let people do things, there is a subset of those people who will do it wrong. Intentionally. And they will be the ones that get noticed. And they will ruin it for everyone else.

You give people a freedom, and they will abuse it.
And if those people abuse it there will be a system in place to disable that privilege for a certain amount of time. Anyway I'm sure you BATs / MATs have a super-secret-tecchy-HQ-subforum where things like this are discussed.

For now I'm ditching my APNGs because I don't like it. I'll stick to my static "Frozen" avatar. And I'll only use APNGs when I make a good one with a static image but something moving / glittering like Pokebis or failboat. But for now I'm going to leave this tutorial up with a warning for anyone who wants an APNG avatar.
Kitsunemimi

Frozen wrote:

awp wrote:

If we let people do things, there is a subset of those people who will do it wrong. Intentionally. And they will be the ones that get noticed. And they will ruin it for everyone else.

You give people a freedom, and they will abuse it.
And if those people abuse it there will be a system in place to disable that privilege for a certain amount of time. Anyway I'm sure you BATs / MATs have a super-secret-tecchy-HQ-subforum where things like this are discussed.
What he's saying is that if too many people start abusing it, it'll get out of control and it'll be disabled for everyone.
Topic Starter
FrozenOG

Kitsunemimi wrote:

What he's saying is that if too many people start abusing it, it'll get out of control and it'll be disabled for everyone.
But that would require disabling PNG support all-together. D:
Larto
Oh you people. animated GIF avatars have been used for so long (by just using the "upload from URL" option), and now you cry about it because it's PNG instead. Eh. eeeeeeeh.
Please sign in to reply.

New reply