Button icon hover/selected Y alignment issue

[Casquall]

On Aseprite version 1.3-rc6

[petrosjd]

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:

1. Opened sheet.png in Aseprite itself.
2. 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.
3. 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:

1. <part id="icon_user_data" x="168" y="255" w="8" h="9" />
   • 
2. <part id="dynamics" x="177" y="144" w="15" h="16" />
   • 

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
   • 
   • Then I just saved/exported sheet.png and reloaded the skin inside Aseprite.
   • 

Hope this helps!~

[Piop2]

@petrosjd, can i get your sheet.png with a new icon added ?

I want to add your sheet at #6