search

Lyutria / aseprite-studio-theme

A dark theme for Aseprite with depth.
119 stars 18 forks source link

Button icon hover/selected Y alignment issue #5

Closed Casquall closed 2 weeks ago

Casquall commented 1 year ago

image On Aseprite version 1.3-rc6

petrosjd commented 9 months ago

image On Aseprite version 1.3-rc6

I seem to have mostly fixed this on my end by changing a few lines in the theme.xml file. It seems like the nine-patch slicing for some of the button-related sprites might have been changed accidentally in the current version (1.2.12.1.2) of this theme. Or the new version of Aseprite may just have interacted with it differently. Below I'll add some fixes and how I found where to look.

Fix for Button Icon Hover/Alignment:

  1. First, make a backup of the theme.xml file just in case.
  2. Open up theme.xml in a text editor, Notepad, Notepad++, etc.
  3. Press CTRL+F to search for these four phrases:
    1. buttonset_item_hot
    2. buttonset_item_pushed
    3. buttonset_hot_focused
    4. buttonset_item_focused
  4. Copy the respective line of code below and replace that line in your text editor.
    1. <part id="buttonset_item_hot" x="112" y="0" w1="3" w2="10" w3="3" h1="3" h2="9" h3="4" />
    2. <part id="buttonset_item_pushed" x="112" y="16" w1="3" w2="10" w3="3" h1="4" h2="9" h3="3" />
    3. <part id="buttonset_hot_focused" x="128" y="0" w1="3" w2="10" w3="3" h1="3" h2="9" h3="4" />
    4. <part id="buttonset_item_focused" x="128" y="16" w1="3" w2="10" w3="3" h1="3" h2="9" h3="4" />
  5. Save the file and load up Aseprite. It should have already applied the changes.
    • If not, go to View -> Refresh & Reload Skin or press F5 on your keyboard (default key for refreshing the skin).

      How I Found the Issue:

  6. Opened sheet.png in Aseprite itself.
  7. When I opened it in Aseprite, it also had a lot of blue boxes and lines everywhere (slice lines).
    • For anyone who doesn't know & comes across this comment, the display of slice lines can be turned on and off with View -> Show -> Slices.
    • This slice data is pulled from theme.xml via the sheet.aseprite-data file.
  8. Opened theme.xml, changed a few values, reloaded sheet.png and the slices had changed.
    • I'm unsure if the slice data in theme.xml can be directly changed from Asesprite or not but I basically just repeated this step until the slices were where I wanted them.
    • The icon/text for a button seems to be lined up with the inner top slice line, which is why the icon would get pushed down.

      Additional Changes/Fixes:

      These were just some things I changed/added either because I wanted an icon to be centred differently or because they were missing.

      Changes:

  9. <part id="icon_user_data" x="168" y="255" w="8" h="9" />
    • User data icon.
  10. <part id="dynamics" x="177" y="144" w="15" h="16" />
    • Dynamics icon. This button is for the stabilisation of graphics tablet/touch input.

I just wanted to centre these two differently.

Additions:

  1. <part id="canvas_e" x="128" y="112" w="16" h="16" />
    • Credit to Piop2 and their pull request. I was wondering why this canvas arrow looked different.
  2. <part id="tool_timeline" x="176" y="128" w="16" h="16" />
    • This is a new icon in Aseprite v1.3.2 that I made a sprite for in sheet.png
    • I put the sprite and slice area next to the 1:1 icon in sheet.png
    • Screenshot of two sprites in an image editor with a red arrow pointing to the newer sprite.
    • Then I just saved/exported sheet.png and reloaded the skin inside Aseprite.
    • How the icon looks inside of Aseprite.

Hope this helps!~

Lyutria commented 2 weeks ago

Merged you in, thanks for the help since I don't pay enough attention to notice when Aseprite updates things on me. Drew a new timeline icon as well since it wasn't included in your drafted PR. Thanks for using my theme!

petrosjd commented 2 weeks ago

Ahh thanks, sorry I didn't include the icon itself as a transparent image. I included the blue screenshot of the sprite sheet so that if others wanted to make one themselves they'd know where to put it and/or if they wanted to copy the same icon then they could draw it in themselves. I thought including my version of the sheet.png itself with the new icon might not be the best idea just in case of any sort of copyright or so too. I should've included a small file of just the icon itself or something. Also, I almost didn't even notice they added a new icon thing, I think I hovered my mouse over where it was meant to be and it highlighted something so I switched off the theme & there was a new button or something like that. I believe even the tag's ID was unknown so I just guessed a few IDs based on the others and found the right ID for the button. (Thinking about it now though, there must be some kind of list of the IDs or an example theme template that also gets updated. Oh well.)