Photoshop to Spine Script - customising the settings?

plunksville · 5 أكتوبر 2022

Hello,
I wondered if there's any coding wizards out there who could help me with something. When I use the PhotoshopToSpine Script to export my pngs, I need to make sure that the exported images dimensions are divisible by 16. Is there anyone who might know how to customise the Photoshop .jsx file to make this possible?

I tried this piece of code that a friend helped with & it seemed to work, however when using the [scale:number] layer tag it would not trim the alpha correctly -

preferences.rulerUnits = Units.PIXELS; with(activeDocument)
   resizeCanvas(width + 16 - width % 16, height + 16 - height % 16)

I replaced this line of code in the original .jsx file here:

// Save image.
            if (writeImages) {
               scaleImage(settings.scale * scale);
               if (settings.padding > 0) activeDocument.resizeCanvas(width * scale, height * scale, AnchorPosition.MIDDLECENTER);

So it would then read:

// Save image.
            if (writeImages) {
               scaleImage(settings.scale * scale);
               if (settings.padding > 0) activeDocument.resizeCanvas(width + 16 - width % 16, height + 16 - height % 16);

If anyone can help with this, it would be amazing! I'll shower you with gifts!
Many thanks, Plunksville

plunksville · 5 أكتوبر 2022

Nate · 5 أكتوبر 2022

I'm guessing you want:

if (settings.padding > 0) activeDocument.resizeCanvas((width * scale) + 16 - (width * scale) % 16, (height * scale) + 16 - (height * scale) % 16, AnchorPosition.MIDDLECENTER);

plunksville · 7 أكتوبر 2022

Superb Nate, that seems to have fixed it! The script is working as before but now making the pngs divisible by 16. You're a legend!!

plunksville · 13 يوليو 2023

Hey @Nate, hope you're well! I know this thread is a bit old now but was wondering if you had any advice on tweaking the script even further to do the following when trim is enabled:

Check if a layer's dimensions are divisible by 16, if not then add on padding to make it divisible by 16 & export png as normal
Check if a layer's dimensions are divisible by 16, if it is then ignore padding and export as png as normal

Any help would be greatly appreciated! Cheers, Steve

Nate · 14 يوليو 2023

You'd probably want to do it here:
https://github.com/EsotericSoftware/spine-scripts/blob/master/photoshop/PhotoshopToSpine.jsx#L435-L436
Add these lines after those:

width += width % 16;
height += height % 16;

Untested, good luck!

plunksville · 15 يوليو 2023

Hey @Nate, many thanks for your reply! Much appreciated.
I gave your suggestion a try but it doesn't seem to be giving the desired result. I placed the code you supplied above into the script like this:

Is that correct?
Thanks again for your help

Nate · 15 يوليو 2023

It's something, not sure about "correct". That will add the remainder of width divided by 16 (between 0 and 15) to the width, which now that I think about it more isn't quite what you want. Give this a whirl:

width += 16 - (width % 16);
height += 16 - (height % 16);

That should be the right math. There's still some question as to exactly where to add it in the code, and if any other code needs to be adjusted, but give that a try in the same place.

plunksville · 15 يوليو 2023

Hey @Nate, that worked but didn't ignore layers that were already divisible by 16.
I also noticed that layers with the [scale] tag were not divisible after export. For example, after exporting with your amended script a layer's width was 80px. Divided by 16 this is 5 so that's correct. However I applied a [scale:0.5] tag to the layer and re-exported. The width was now 40px and when divided by 16 is 2.5.

I fear this requires a lot of adjustment in the code!

Nate · 15 يوليو 2023

% is modulo. 40 % 16 gives 8 because you effectively subtract 16 until you have < 16, so: 40 - 16 - 16 = 8. 16 - (40 % 16) also gives 8. That means 40px would become 48px, which is correct (so far).

Later we do width * scale, which is the [scale:x] value. For that to work you probably want:

width += (16 - (width % 16)) / scale;
height += (16 - (height % 16)) / scale;

Dictated but not read.

plunksville · 15 يوليو 2023

Hey @Nate, thank you for explaining. On the weekend too!!
The code is working in general for making all exports divisible by 16, however layers with [scale] tag & layers already divisible by 16 are not being affected as desired.
I've opened a massive can of worms here!

Nate · 15 يوليو 2023

What happens with layers already divisible by 16? They should be exported as normal, since the math evaluates to zero.

plunksville · 16 يوليو 2023

Hey @Nate, there's a layer that is already divisible by 16 but that layer is also having pixels added on.
The original size is 896x896 but is being exported at 912x912.
Here are my settings in the script panel, could it be the default padding of 1px that is throwing it off?

Massive thanks! Steve

plunksville · 16 يوليو 2023

I tested exporting with Padding set to 0px and it has caused the "divisible by 16" code to now be ignored.
Does the padding need to be set to at least 1px for it to work?
Cheers, Steve

Nate · 16 يوليو 2023

Try this to account for padding:

width += (16 - ((width - settings.padding * 2) % 16)) / scale;
height += (16 - ((height - settings.padding * 2) % 16)) / scale;

Nothing is ignored, the math just works out to zero when width - settings.padding * 2 is divisible by 16. Ah actually it works out to 16 - 0 = 16. You can try:

var increase = (width - settings.padding * 2) % 16;
if (increase > 0) width += (16 - increase) / scale;
increase = (height - settings.padding * 2) % 16;
if (increase > 0) height += (16 - increase) / scale;

plunksville · 16 يوليو 2023

Nate
Hey Nate, I tried your first suggestion and it made the 896x896 layer 914x914 this time.
Trimming was set to 1px.

plunksville · 16 يوليو 2023

tried your second suggestion too, this time it's changed the 896x896px layer to 989x989px.
Trim padding was set to 1px again.

In both cases, if trim padding is set to 0px then the script seems to ignore the divisible part!
Apologies for taking up your time on this, I appreciate you help

Nate · 16 يوليو 2023

For 896 with 1 padding increase is zero and nothing should change. Nothing we did can change 896 to 989, which is a difference of 93. The most we add is 15 / scale. Maybe something is going on with scale. Remove your scale tags or remove / scale and see. Use alert so you can see the values, ie alert(increase);.

plunksville · 17 يوليو 2023

Hey @Nate, thanks again for your help. I tried removing the scale tags and /scale but it's still returning strange results.
After running the script with padding set to 1px, the layer that's 896x896 has exported at 898x898. Adding on 2px rather than ignoring this layer.
Not sure if you have time but would you mind checking the PSD & script i've attached? No problem if you haven't got time. Very grateful for your help so far

wild-symbol-psd-script.zip

4MB

Nate · 17 يوليو 2023

896 to 898 is correct. Wait, you want to not export layers that are divisible by 16? I missed that requirement. Try:

var increaseX = (width - settings.padding * 2) % 16;
if (increaseX > 0) width += (16 - increaseX) / scale;
increaseY = (height - settings.padding * 2) % 16;
if (increaseY > 0) height += (16 - increaseY) / scale;

// Save image.
if (writeImages && (increaseX || increaseY)) {

That will skip create the image. I guess that's what you mean by ignore? It'll still be in the skeleton data as an attachment.

I didn't try the PSD because it seems like the problem was in defining the requirements rather than the code. Hopefully the above is enough.