Skip to main content
M
MainframeNorth
Known Participant
February 1, 2016
Question

Retina @2x.png icons for script UI

  • February 1, 2016
  • 3 replies
  • 6268 views

Hi, does anyone know where I can find any documentation on setting up retina images for Script UIs in After Effects?

From digging around in the After Effects install directories I can see lots of icons using the @15739213.png naming convention. So I tried creating my image at 2x res and named it accordingly but if I try this:

myButton: IconButton {text:'Import',properties: { style : 'toolbutton' },image:'myImage@2x.png'},\

I just get an image that's twice the size it should be. i.e it's not respecting the display.

Is there something that needs to be included in the button properties?

Thanks,
Chris

This topic has been closed for replies.

3 replies

M
MaxMercier
Participant
April 25, 2019

Howdy!
In case this can help someone, I'd like to mention that the @2X suffix thingie works for me in ScriptUI for Photoshop for Windows (version CC2018)

Here's what I noticed, as I have a multiple monitors setup, only one of which supports Hi-DPI.

  • The behavior seems to be that if Photoshop starts on the Hi-DPI monitor, @2X assets are used.
  • If Photoshop is moved to a different monitor, this behavior does not change.
  • If a ScriptUI window is moved to a different monitor, it's still using @2X assets (not surprising as I was not expecting it to reload assets)
  • The ScriptUI window seems to show up on the main monitor, whether or not Photoshop is starting on that monitor.

Cheers!

A
adamplouff
Participant
April 24, 2017

Here's my solution for retina icons. It's an exploit on moveTo() but allows for drawing vector icons without pngs. A whole lot of constraints but it does work.

GitHub - adamplouff/scriptui-battlestyle: Button options for ScriptUI, namely high high-density/retina icon buttons from…

UQg
UQg
Legend
April 24, 2017

Thank you for posting.

To make the button mouse-sensitive you can add mouse event listeners to it, with the handler being simply:

function mousehandler(ev){
    this.notify("onDraw");
    };

Then adapt your onDraw function so that it takes into account the drawState argument

(typically, pick the draw color according to drawState.mouseOver and drawState.leftButtonPressed)

function onDraw(ds){

    // ds: object created by ScriptUI whenever a control is being drawn.

    // properties are "mouseOver", "leftButtonPressed", "rightButtonPressed", "middleButtonPressed", etc

  

    /**/

    };

My experience is that it works very well in CS6 and before, and less and less as the AE version number increases.

There are numerous issues in CC with the graphics object and onDraw in particular, and it seems that it's better to avoid.

Xavier

    D
    David Torno
    Legend
    February 1, 2016

    My guess is that you would need to test the user's display and check manually for some kind of clue that would tell you if they are running retina sizes, then use the appropriate image you want.

    Perhaps calling $.screens and parsing the frames size might be a clue as to the resolution they are using. The script will not auto detect it from what I am aware of.

    On standard 1920x1080 screen you would get these results.

    0:4-1920:1058,1920:0-3840:1080

    M
    MainframeNorthAuthor
    Known Participant
    February 2, 2016

    Thanks for the response David. I guess I was kind of hoping that as After Effects itself is aware of the screen res that all that info would pass down into the UI globally.

    I'll experiment with your suggestion though.

    Thanks,
    Chris

    J
    Jakob Wagner 2048
    Inspiring
    April 18, 2016

    Hi Chris

    Did you find a good solution for this?

    Thanks,

    Jakob Wagner

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices