Item preview image issues

[ReneeIbeji]

Preview images for some items (e.g. wings) appear to be blank.

I've partially fixed the issue in my own fork of the repository by drawing all the layers of the item in order of their z position instead of drawing just the first layer. This seems to fix most of the issues.

However, there still seems to be some issues framing and viability with particular item previews like some of the weapons.

[jrconway3]

Yeah I've noticed this and I'm not sure how they fill in properly. Some items straight up work and others don't. If there's something I'm doing wrong when adding new assets I'd like to know so I can correct these problems in the future. Maybe it is just the code, though.

The other thought I had is that it is related to only handling the top most layer listed, in the first frame, and with many of the assets I'm adding having multiple layers, if its not in the first frame of the first layer it won't show up.

[ReneeIbeji]

What I found was with most items it was the layer issue. The preview image is taken from the items preview-row (which is by default 10 and only defined in 4 sheet definitions) multiplied by 64 (the universal frame size) and takes a 64 by 64 image from that point so on the normal sprite sheet, it ends up using the 1st sprite on the 11th row of the sprite sheet.

I've found that the preview image being blank has two causes:

1. The 64 by 64 pixel frame not having any content on the first layer
   • This seems to happen a lot because a lot of item sprite sheets seem to have two layers, one for foreground and one for background. As the first layer is the only one represented in the preview image, for items with this arrangement it may cause a blank preview image
   • Eg in the dragon foreground sprite sheet
   • This causes a blank image as only the background image contains anything in that frame

• The easiest way to solve this I found is to generate the preview image from all the items layers instead, in the case of the wings combining the foreground and background resulting in this:

2. The 64 by 64 pixel frame the preview image is taken from is outside the bounds of the sprite sheet
   • This seems to be the case for some of the weapon items.
   • The best way I've found to solve this is by defining the attribute "preview_row" on the items sheet definition file.
   • Just find the pixel distance between the top of the sprite sheet and the top corner of the 64 by 64 frame of the image you want to act as the preview image. Divide the pixel distance by 64 and use approximately that number and you should be able to see the attribute preview_image after regenerating the html.
   • Eg (sheet_definitions/weapon_ranged_bow_recurve.json)

     "name": "Recurve",
     "type_name": "weapon",
     "preview_row": 17,

I've already implemented the code needed to display all layers of an item as the preview image in my own fork of the project on git hub and will just submit it as a pull request.

For the second issue, it mainly seems to impact weapons as they don't seem to follow the standard format of all the other spreadsheets, so just try setting the preview_row attribute in those items definition files with the steps above to try and get them to show. Just comment if you have any questions.

[ReneeIbeji]

For the case where there just so happens to not be anything in that particular sprite frame, try changing the preview row attribute to the row number of a row that does have something in that frame.

[jrconway3]

Doesn't look too bad, but I do see a few areas where there's a problem. This is the big one I'm seeing:

It seems that the layering maybe isn't taking into account the z-index properly? Because these hairstyles are a mixmatch of having the correct layering and incorrect layering.

Its not a big deal, just something to note.

The wings look excellent now, it was really annoying not being able to see the wings in the previews:

[ReneeIbeji]

Yeah fixed the layering issue, was just using the wrong value for the first layers zpos, should be fixed now! Edit: there might still be some issues still testing

[ReneeIbeji]

There seems to be an issue in the order of when the images are loaded, so sometimes the top layer is drawn first before the bottom layer, will try to look into it.

[ReneeIbeji]

OK, I think the problems solved now, just had to make sure all the layers of the item are loaded before drawing them onto the page in the correct order Just comment if you notice anything

[jrconway3]

Yup, there we go, that looks better!

I don't think it looks very great having the foreground laying over the background without the body in the middle, but at least having it layered correctly makes it look a lot better so you have the front of the hair in front of the back and properly see the bangs and everything. Not much we can do about the hair, but this layering REALLY fixes up assets like the wings and tails!