Code Monkey home page Code Monkey logo

Comments (8)

jrconway3 avatar jrconway3 commented on July 19, 2024

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.

from universal-lpc-spritesheet-character-generator.

ReneeIbeji avatar ReneeIbeji commented on July 19, 2024

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.
image
image

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
    image
    image

  • This causes a blank image as only the background image contains anything in that frame
    image

  • 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:
    image

  1. 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.

from universal-lpc-spritesheet-character-generator.

ReneeIbeji avatar ReneeIbeji commented on July 19, 2024

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.

from universal-lpc-spritesheet-character-generator.

jrconway3 avatar jrconway3 commented on July 19, 2024

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:
ulpccg-preview-hair

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:
ulpccg-preview-wings

from universal-lpc-spritesheet-character-generator.

ReneeIbeji avatar ReneeIbeji commented on July 19, 2024

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

from universal-lpc-spritesheet-character-generator.

ReneeIbeji avatar ReneeIbeji commented on July 19, 2024

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.

from universal-lpc-spritesheet-character-generator.

ReneeIbeji avatar ReneeIbeji commented on July 19, 2024

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
image
Just comment if you notice anything

from universal-lpc-spritesheet-character-generator.

jrconway3 avatar jrconway3 commented on July 19, 2024

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!

from universal-lpc-spritesheet-character-generator.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.