Spiral Knights - APNG and the Wiki. Can this be used for future uploads for accessories and equipment?

APNG and the Wiki. Can this be used for future uploads for accessories and equipment?

15 replies [Last post]

Wed, 05/21/2014 - 02:07

Glacies

I've been testing this myself seeing how well APNGs compare to GIFs and if it could be used as a standardized setting for all current images.

Example for Dread Seal:
GIF of Dread Seal Unattached.
APNG of Dread Seal Unattached. (Requires Firefox or APNG Add-on for other browsers.) *It's somewhat looped improperly as the flash is caused by bad looping skills and can be fixed. Just an example.

So, let's look at the differences compared to GIF and APNG:

COLOR:

The GIF is very bad in quality and loses a lot of color in conversion.
APNG retains its color, showing off the artwork of Spiral Knights.

SIZE:

The GIF has less frames than the APNG and is even re-sized in order to cut down the size. The Size is still quite large.
APNG through a method is able to retain its color and cut down its size easily while maintaining its color.

COMPATIBILITY:

GIF is able to be viewed by everyone regardless of what browser is used.
APNG requires Firefox or a plug-in for all other browsers to work properly. However, it will remain a still image which can be used in original quality compared to using GIF.

As you can see, the APNG looks amazing and still retains the original quality of a standard PNG.

I wasn't sure if we can use this as a way to correct all images or if this would be allowed in the future. It's very easy to do and even if someone can't do it, it doesn't break the compatibility with all other images quality-wise.

Wed, 05/21/2014 - 02:54

Dracora-Speaking

Seems Fine

I've been uploading gifs for a while to the wiki due to demand, just so people can know what they might be getting out of a box, besides just something that's called "x." And sometimes the available previewing just doesn't cut it... like "blossom aura." Okay? Oh wow, that leaves trailing effects when you walk! You'd never know about that trailing unless you saw someone in-game with it on, moving, or if a wiki editor uploaded an animation of it.

A lot of SK is art. And Art needs to be seen...

gif - easy, but color range limitation of this file format (which CANNOT be helped with this format, for those interested in gifs) makes the beauty of spiral knights get a little bit lost (so they're good for conveying shape behavior and not much else), which is why you're wanting to do another format, yes? And the wiki supports png, so that's what you're wanting to do.

Browser limitation is annoying, but if you have the single image visible regardless, fine.

My issue with this:
A page full of animations like this, how will that affect the loading time/viewing in general for casual wiki perusals? That's why I've stuck my uploads into show/hide tabs (which helps many users with older computers, yes, all the files load, it's the visuals that cause issues for them). If every image is a mimic of the hovering image in-game, that would not only be a slow upload, but dizzying as well, considering how many things are in list form. If I'm understanding the eventual intent of this correctly.

I think it should be limited to things that animate on their own, such as auras, battle sprites, and certain weapons.

have you tried to see how resizing the png animation affects it? Would be great if the answer is: not at all. Cause gifs stop animating on the wiki if they're resized.

What would be better, really, is just being able to link to say, a youtube video (link from the wiki to a video host) that features all the new accessories that come out of boxes every time (well, the older items/weapons like bombs exploding too of course, haha), Dev-made or wiki-editor-made, anybody-made really, as long as the style is the same. Like how they pose in Haven for us sometimes? But on youtube, or some other video hoster that everyone can access. That would bypass all the file issues, most of the browser issues, save us wiki editors time+frustration with file creation (looping = *eye twitch*) and keep things consistent. Copyright issues?

Since the point of all this is to let people know what things look like.

Wed, 05/21/2014 - 07:40

Bopp

are they supported?

Are APNGs supported by the MediaWiki software? Are we allowed to upload them?

Wed, 05/21/2014 - 10:00

Wavara

Steam accounts can't help the Wiki ;_;

"What would be better, really, is just being able to link to say, a youtube video"
Please no, I prefer 1500 GIFs/APNGs over any YT video. Not everyone has free bandwidth.

"save us wiki editors time+frustration with file creation (looping = *eye twitch*)"
If that's a real problem, I could try to help. I've done GIFs all my life =D

Wed, 05/21/2014 - 12:02

Glacies

APNGs are supported by MediaWiki software as I've seen quite a few use them. (rarely since GIF has always been a thing)

I basically meant "reupload all images" is more or less limit it to one animated PNG per page unless needed with different visual effects. (IE: Auras)

I was more or less thinking of using the APNG as the main header image. The great thing about this is that even if the browser doesn't support APNGs, you still have a high-quality stand-alone frame of the image which doesn't reduce overall quality.

As for those who don't understand why the image isn't animated. I've added a Template that states the image is an APNG and about compatability: http://wiki.spiralknights.com/Template:APNG

And no, resizing always breaks both GIFs and APNGs and stops them from playing, it's just an issue with mediawiki itself on that end.

Wed, 05/21/2014 - 15:52

Dracora-Speaking

@wavara

It would be a sort of SK "advertisement" for a group of items, not every single little thing. (That would be horrible). Like what this one person does with spiral spy (yes, SS stuff isn't allowed on wiki, this is just an example): uh, can't find the vid atm, will update later.

EDIT: AHAHA I FOUND THE VIDEO.

Improvements/thoughts for this: In the "show more" section of the youtube page, have "go to this time to see this item" in a list. Also, have overworld movements for things like auras (which behave in special ways when the player moves in-game).

And then apply this to bomb detonations and such (a lot of the bomb pages lack information on AoE/radius/aesthetics).

Free bandwidth? What's that? XD.
Anyway, that's a good point - this would be just another option. Again, if it's allowed.
Harder to force style standardization, but easier for more users to contribute to the wiki's content.

And no, .gif creation is not a real problem (it's super easy, just takes time like anything else), but it is annoying for doing fast/mass uploads of things that are just recolors of the same shape. Which I don't do, anyway. I just like complaining, I'm a human after all.

but srs over 100 animations made/uploaded for aesthetics by me, and it's still not close to being done.

and then there could be a better format with glacies' png method, so,

gif creation ON HOLD, except for any new auras. User demand for those visuals is too high.

@glacies
Post your method of creation soonish, I'm curious.

Wed, 05/21/2014 - 16:10

Glacies

I decided to try it out with a reskin of a weapon: The Furious Fork.

http://media.spiralknights.com/wiki-images/d/d8/Furious_Fork-Equipped.png

It's done at 15fps, maybe 10fps would work better? (just a test, nothing more. I have an image I can replace it with)

Wed, 05/21/2014 - 16:58

Dracora-Speaking

Hmm

Yeah that startled me, was going through adding images like I usually do and I was like WHOAH DER.

It would be a good idea to limit uploads of these things as official iteminfo visuals, and it's good that you mention it's only a test. At least until we get the green light from OOO staff.

It's a bit slow compared to the hoverview in-game, so if you wanna be as similar to that as possible, well, you know what to do. As far as getting aesthetics across, though? I like it slower, this speed is good. Good job with the loop, it's pretty seamless.

Had a thought - can you make it so it only animates if the person viewing the page stalls their mouse over the image? That would be super neat.

I cannot emphasize how much better this is than gif ;n;.

I've gone and submitted a request to the game staff to see what they have to say, green or red light wise. Let's hope for green.

Wed, 05/21/2014 - 21:45

Dracora-Speaking

Soaked Aura

Side note - I've captured several rotations of an unattached soaked aura from a knight in-game, it's in a sloppy .avi format for later personal viewing now.
The details on this one are so delicate that the .gif format doesn't even register 'em, making gif animation of this completely pointless, so I won't make one.
@glacies - I'm not sure what process you're using to make the APNGs, but I'm sure you can make something of the visuals I've captured in the .avi. Care to experiment (regarding fine details) with the soaked aura if I can send you this file? Or outline your methods so I/we can give it a go. This is useful for more things than just sk and its wiki, so there's no harm in spilling the beans really. Besides, with more people working on the method, barriers to progress might be overcome more quickly (again, in general, not just for sk).

The knight Nicoblitzk had the aura, if you wish to cap it yourself. The aura might have a new owner by now, though, so, good luck!

Sun, 05/25/2014 - 23:50

Dracora-Speaking

AHAHA-Overworld APNG! So I had a go at it...

omg so much better than .gif... So I had a go at it here (use firefox or plugins if things are not animated for you, as discussed above):

Imgur Test: Dreadful Aura Overworld APNG

and tested on wiki here:
Wiki Test: Dreadful Aura Overworld APNG

Compared to this DREADFUL dreadful aura gif (old work of mine):
Dreadful Aura Overworld GIF

IMGUR test: Soaked Aura APNG
The details on this one barely show up in gif, if at all. Another test. This one is a bit...choppy? And I'm trying to figure out why. I think I might have had lag whilst recording. The loop is at the front. Sometimes particles are randomly generated, so avoiding the seam would be next to impossible for many items. Hmm. This image should be a bit blurrier than the overworld dreadful aura, for comparison, due to an experiment involving bits-per-pixel in one of the conversion steps (more is better! haha).

Cold Iron Vanquisher: APNG
This one was captured with FRAPS instead of Bandicam, graphics high, Anti-Aliasing at 8x.

===============================================================================================
So those are approximate dimensions for overworld and unattached shots, so far.

Super fun, here's my process/programs:

Step 1:
record in-game target (game graphix quality: high, Anti-Aliasing max) with PROGRAM: "bandicam", producing an AVI file.
FRAPS is better quality than Bandicam.
Step two:
open AVI in PROGRAM: "jasc animation shop 8", crop as needed, save as BLAHBLAH_Cropped AVI, highest quality
step 3:
open the BLABLAH_cropped.avi with PROGRAM: "VirtualDubAPNGmod", export as Animated PNG with filename: BLAHBLAH_cropped_FINAL.
step 4: upload to imgur as test.
step 4.1: upload to wiki as test (main barrier here is file size).
step 5: seek improvements and dimension standards, as well as seamless loop effort +1000.
-For details on what little buttons to press in each program and so on, I'll make a video of the process IF we get the greenlight.

Gonna hold off on step 5 until we get the green light, there's a lot of smaller quality issues to fix, both in the file processing as well as the capture itself.

Jasc is REALLY old, and sometimes it does things it's not supposed to. It has a lot of memory problems. If you can find a free one somewhere, yipee! But really, Only use my process if another person's process doesn't work out for you. Mine takes a lot more...watching the frames to make sure memory loss doesn't botch them.

===============================================================================================

All uploads are just tests.
IMO - speed of these should be as close as possible to what we see in-game. This seems to register as 9 fps in the programs I've been using.

IMO - size of these needs to be very consistent. When you crop, do so just enough to clear away the pixels inside of the curvature: comparative example here: Cropped to Image, Corners Removed, Curved "Corners" Removed
For APNGs of hoverviews, third is best, IMO - looks the least messy, and easy to be concise.

IMO - first frame should be an image that you feel, as a wiki editor, best portrays the item visually.

IMO - for things that are just too darn impossible to loop without a seam , we could do something like this:

Fading Transition and Title: Aggro Aura

Same thing, but with a slightly longer, more comfy-feeling pause:
Fading Transition and Title: Aggro Aura:Longer Transition Pause
Transitions are at the end of the animation, not the beginning

If transitions are bad, just have the player walk around a set area, even if the aura doesn't trail (I use 3x3 tile area in the center of my empty guild hall room). The way knights move around makes a loop surprisingly easy to accomplish, as the brain just ignores certain things when entities are moving in this way. Even my extra finnicky brain doesn't have too much of a problem with the Dreadful Aura overworld (linked to above), though obviously that can be improved.

Have the player pause for about 1 second in the center facing south, then move, as a representative first-frame image of the item...or focus on a moment where the trail, if the item trails, is visible. Just be sure to get a good shot of any special item behavior.

And of course, the unattached aggro aura (no need for a transition/loop frustration here):
Unattached Aggro Aura

An attempt at an overworld with minimal seam (you can see it, sure, but does it BOTHER you?):
Soaked Aura: Overworld

Overworld might be smaller in dimensional size than the hoverview. Working on figuring out how to standardize. So far, using an empty room in a Guild Hall helps, because the tiles on the floor are so obviously outlined and easy to use as crop guidelines.

===============================================================================================
Oh plxplx green light plx. Users have wanted visuals of things for so long (especially for auras, hence my gif efforts)...this would just be so great for everybody, because APNG is so versatile and HQ.

Even if we don't get the thumbs-up for main images, we can probably still upload APNG to replace the gif's I've uploaded for accessories (as they are in show/hide tab lists on the wiki now) because the quality is so much better...as long as they have the {{APNG}} tag to clarify what they are for users.

I'll be working in the sandbox with such {{APNG}} experiments, regarding auras.

Sat, 05/24/2014 - 03:07

#10

Glacies

Here's my version really used, takes more work but I prefer it and it's personally faster.

Tools used:

Fraps - Freeware Version. I use the full version but fraps provides the most solid .AVI capture out of all others and the freeware version work perfectly for it. If you prefer to use others that's fine and dandy.
GIMP 2. This is a pretty important one since you can batch edit photos using GIMP and it's free.
GIMP 2 Plugin - Batch Editor. This is used to batch-edit all photos used in GIMP 2 and any recorded frames.
Virtual Dub. This is the only good software I could find that would freely convert .AVI into .PNG
APNG Anime Maker. The download link is through softpedia only because the Google Doc. version is down. Just make sure you don't click on any ads. The Software is used to make the APNG.

Once those are downloaded, these are the steps to the creation of an APNG;

Run FRAPS and have it attached to Spiral Knights. I forget the Framerate that the free-version of FRAPS uses but it should be 15FPS if not lower. That works perfectly fine.
Once attached, find the item you're looking for. In this case, we'll use one of my favorite weapons, a Winmillion.
Start recording. I personally wait for it to spin around twice before ending the recording so it allows me to pick at it see which rotation is better
Once the video is recorded, you must jump to where your footage is recorded. This is usually directed at C:\Fraps\Movies
Open up Virtualdub and open the video. I prefer just to drag the .AVI onto the screen and go from there but it may be opened using CTRL + O.
Once the video is open in Virtual Dub, go ahead and go to File -> Export -> Export to Image Sequence. Upon there, make sure to direct yourself to a new sub folder. I usually prefer to name the folder after the item name so in this case. Winmillion. Once the settings are the same (Make sure it's set to .PNG), click okay and let the process ride.
Head onto your directory and you should be greeted with about 120 Images. (varies based on how many frames you have recorded) Open up GIMP 2 and run Batch Process. (Filters -> Batch Process)
You'll be greeted with a small secondary GUI in Gimp. Click on Add Files and add the starting frame and the final frame. Make sure it loops properly and does not spin multiple times. It should only spin once. (In my case, I'm adding Frame 40 - 119)
Open only one of the pictures in GIMP on the side, it can be any frame. Use the Rectangle Tool and find out the X/Y Pos. of the tooltip for mass cropping. Head back to the small GUI and on the crop sub-tab, enable, and set your X/Y Pos. to what you found using the rectangle tool. The Width and Height of the Tooltip is always 201x222. Head onto the Output tab and make sure the format is set to .PNG. Hit the test button and see if the image is properly cropped. If not, you did something wrong and need to head back.
Head to the rename tab and set the output folder to a new folder. (Select DIR) Once set, hit start and watch the magic happen!
Open up your output folder and your images should all be there. Head on and run APNG Anime Maker. Click on "Open" and select all your output images.
Your images should be fully set into APNG Anime Maker. Go ahead and use these settings for your conversion settings. You'll want to next run Optimize. This will cut down the size of the APNG by a huge amount. Set your Delay to 1 and click on msec. This will convert it to the lowest possible count to move onto the next frame. Click on save at the top and rename it to whatever you want.
Tada! You have converted your image into an Animated PNG! The end result should look something like this: http://i.imgur.com/Az3nl8r.png

There are other settings that can be applied but so far the settings on APNG Anime Maker has worked the best.

Mon, 05/26/2014 - 01:07

#11

Shindyvarrek

Just took part in getting my

Just took part in getting my aura capped, and I looked over the project so far; I'm so glad this endeavor is being made. It's very helpful to players, especially new players and those returning from long absences. It's hard to find what an aura looks like, especially since some of them are so scarce. People looking into them are really going hit or miss sometimes, especially since the turnaround in the rare AH find omits details and trails. The APNG is very smooth and it shows much more detail than the gif versions I have seen. APNG really seems like the best way to go despite gif being easier.

Keep it up guys! :D

Mon, 05/26/2014 - 03:22

#12

Dracora-Speaking

TL;DR

All that fat text in all the comments and techno-babble - not making sense? Here's the gist of it all:

APNGs are high quality animations that will show users how things look and behave. If the image doesn't animate for a user, it doesn't matter, because APNG shows the first image in the animation anyway. The file root is the same for both png and APNG - PNG. not APNG. Just png!

APNG would be, for many users, a silent improvement due to this "shows the first frame by default" behavior, making no difference. For so many more users, it would be an extremely valuable source of information - especially for things like accessories, where appearances are almost always the deciding factor in whether or not a player makes a purchase...Obsession with collections aside ;)

check out the sandbox table for a full spectrum of APNGs in lists (this list is also a working improvement for special accessory pages in general-with APNG images or PNG, it will look exactly the same on the page, clicking the APNGs will take the user to a page where it animates), and the Furious Fork page for the potential of this wonderful file format for individual pages.

The feedback for this has been incredible, and 100% in support, so to devs/GMs considering this option:

option A) let us use APNG for everythings! ALL THE THINGS. Most users won't know the difference, but the word should spread quickly.
option B) let us use APNG in list form, if not as the main images.
-or a minor list form, like I've done with gifs.
option C) don't let us use APNG at all and there will be tears shed. Well, by me.

Mon, 05/26/2014 - 05:41

#13

Bonjourhippo

APNG seems very promising. My

APNG seems very promising. My goods are available for preview on node 100471. Nova already went ahead and recorded some, feel free to ask me for more.

Mon, 05/26/2014 - 06:30

#14

Pepperonius

APNG seems a large improvement

Seems more fluid, and overall gives a better overall image for viewing. Very handy for folks looking to preview without the item, and definitely better than gif.

Fri, 06/06/2014 - 09:24

#15

Glacies

I went ahead and contacted the gamemasters about this. Clotho specifically responded with this:

As for the APNGs, we are not opposed to their being uploaded. As mentioned in the thread, it's likely we'll run into some compatibility issues, particularly for browsers that don't support them. However, they still look as images and that will serve the purpose just as well. Handling them with the APNG template is a good idea. I think you all are handling the new addition just fine!

If there's more to add in the future, we'll be sure to mention in the thread. Thank you!

This seems as a "you can go ahead; guys. We'll just keep on eye on it." response.

As such I feel as though it's finally green-lighted.

I'll start uploading equipment images later.

Search

APNG and the Wiki. Can this be used for future uploads for accessories and equipment?