RetinaPro for NGUI - Easy management of multiple devices pixel / screen resolutions

An update has been submitted with the following changes:

Version 1.3
- added support for multiple screen sizes per device (different aspect ratios etc.). Allows you to reuse an atlas for different screen resolutions.
- redesigned atlases window. Fixes issue where large numbers of atlases (> 15) would be very slow to edit / change.
- added support to preview window for multiple screens and aspect
- fixed issues with aspect ratio / device selection when handling auto-rotation
- fixed issues with device selection when running in editor and the game view is smaller than the actual desired screen resolution
- updated readme.txt file to match new features

 

For those that are interested in UITexture support...

I reviewed the UITexture script and it doesn't offer support for swapping via a reference similar to UIAtlas. In other words it doesn't currently support the concept of multiple screen resolutions. This presents a problem because conceptually it's the wrong solution for the problem. At this point my best idea is to create an entirely new script (RetinaProTexture) that actually solves the problem of supporting multiple screen resolutions / art assets and also supports stretching where needed.

Having said all that I'm not sure on the full scope of everything it would need to support.

For those that were asking about this feature could you please take some time and let me know specifically what your expectations are. Any ideas / comments are welcome.

Thanks!

 

I can only speak for myself, but a UITexture that supports Pixel-Perfect is good enough for me. For example, when I have a large UI background (2048x1536), I will currently put it into its own atlas, which takes up additional space because it needs to fit in a 2048x2048 atlas. Having a RetinaProTexture that could support both the 2048x1536 HD background and the 1024x768 normal background would be good enough for me.

 

That seems fairly straightforward. Some additional questions:

- Do you ever use smaller than screen sized textures?
- Do you use UIAnchor for these?

 

Changes:

• added support for multiple screen sizes per device (different aspect ratios etc.). Allows you to reuse an atlas for different screen resolutions.
• redesigned atlases window. Fixes issue where large numbers of atlases (> 15) would be very slow to edit / change.
• added support to preview window for multiple screens and aspect.
• fixed issues with aspect ratio / device selection when handling auto-rotation.
• fixed issues with device selection when running in editor and the game view is smaller than the actual desired screen resolution.
• updated readme.txt file to match new features.

 

Hi
My UI uses many sliced sprite which used for UI frame, buttons..etc.
Can I use retinaPro with sliced sprite?
I bought this package but can't find out how to use with sliced sprite.

 

NGUI doesn't support pixel perfect on the sliced sprite. The problem is that the sliced sprite uses the game objects scale transform. Unfortunately that is also used to keep a widget pixel perfect - so obviously it can't do both at the same time. My recommendation is that you use UIImageButton instead.

In the next version of RetinaPro I plan to add a new texture / rendering script that will allow for large textures and stretchable textures that works with pixel perfect.

 

I'd like pixel perfect UItextures. Currently I use UITextures for dialog's which are too big for an atlas. Stuff like 400 x 250 or something I generally dont put on an atlas

 

Is there anyway to preserve border values between atlas refreshes? I am using sliced sprites and it is a real pain to have to re-enter these values everytime I refresh the atlas.

 

FWIW, this issue is on my list to fix. However, I should add something to the readme about it.

As per the readme file, my recommendation is to use UISprite / simple instead of the sliced sprite.

Currently NGUI doesn't support pixel perfect sliced sprites. So, even if this particular issue was fixed (the border values being reset), RetinaPro still wouldn't be able to keep your sliced sprite at the correct size.

 

Just a quick update:

I'm working on UITexture support for version 1.4. That will also include some other fixes / additions for refreshing UIPanel's.

Important note about price:

Version 1.3 will be the last version offered at $5. Going forwards (including v1.4 I will be increasing the price significantly). This is your chance to get the package at a discounted price.

 

Excuse me but why fixPixelPerfect() in retinaProAtlasController.cs use 3 "yield return new WaitForEndOfFrame()" to delay action by 3 frame? I can't call NGUITools.AddWidgetCollider(gameObject); on button Start() because the MakePixelPerfect has not been called.

 

There is a certain amount of updates inherent in the way NGUI prepares GUI elements that unfortunately means you can't immediately call pixel perfect. A better way is to use the retinaProUtil.refreshWidgetPixelPerfect(myGameObject) method. Using this method you can leave the BoxColliders on the widgets as normal.

Let me know if that doesn't fix your issue.

 

That's cool, thanks! I see the refreshPanelTest.cs in the Example. BTW. I move the refreshPanelTest.cs before the Default Time because I want to set some collider to my custom size.

 

Is it possible to make the required folder structure configurable? Even just through the retinaProConfig class?

We generally place packages from the Asset Store in an 'Asset Store/Package_Name' folder so that we can update them easier and also keep the project a little cleaner. Having multiple packages from the Asset Store placing their assets all over the project root becomes a mess pretty fast

 

Playing with this some more, I realize that it is actually pretty easy to change the folder structure to what I want. I tried it once before, but I think I was getting too fancy. It might be good to have the default folder structure be under a single RetinaPro folder for the whole package, but that might just be easier for me and not everyone else.

 

Understood and I agree. Keep in mind that when you pull down the RetinaPro package you don't need to import the Assets/Resources, Assets/Textures or Assets/RetinaPro/Example folders. Those are for the example scene.

When you first try to use RetinaPro it *will* create a Resources and Textures folder. However, you can modify what those folders are using RetinaProConfig.

Code (csharp):

1.  
2. public const string atlasResourceFolder = "/Resources/rp_atlases/";
3. public const string atlasTextureFolder = "/Textures/rp_atlases/";
4.  

As for moving the actual RetinaPro folder to a sub-folder, I don't see why that wouldn't work - but if it doesn't, let me know.

 

Do you mean having the Resources and Textures folder under the RetinaPro folder?

 

Hi Ian:

I bought the tool without reading the six pages of posts.

I use sliced sprites (loading progress bar, sliders, menu panels) and I can't figure out how to retain the sliced sprite values in the atlas on a refresh.

Is this not possible? If not, this tool is not going to help me as much as I had hoped.

I read your answers above, yet I still don't understand, because I assume (probably incorrectly) that you are simplifying things by building the structures for multi-atlases for us, for use with NGUI, using the top level reference to dynamically change at runtime. Do you extend NGUI and do things that stop scaled sprites from working?

In my initial trials it worked fine, it only failed when I added an new sprite. If the data already exists on the dimensions of the sliced sprite in NGUI, can't you read it/update/restore it? If I add a different sized sprite, I realize I will have to modify the slice values anyway...

 

Yeah, that's what I meant. But like you said, it works if you change the atlasResourceFolder and atlasTextureFolder paths in retinaProConfig. The only other thing I had to do to move the RetinaPro folder to a sub-folder was change the retinaProDatFolder constant as well. So my constants in retinaProConfig look like:

Code (csharp):

1. public const string retinaProDatFolder = "Asset Store/RetinaPro/Resources";
2. public const string retinaProDatFile = "RetinaProData.txt";
3. public const string atlasFolder = "rp_Atlases/";
4. public const string atlasResourceFolder = "/Asset Store/RetinaPro/Resources/rp_atlases/";
5. public const string atlasTextureFolder = "/Asset Store/RetinaPro/Textures/rp_atlases/";

And everything seems to be working correctly. Thanks!

 

You're welcome and glad you got it working.

 

Sliced sprites don't work with arbitrary screen dimensions - there is only one set of border values - that is a limitation of NGUI. RetinaPro does have a bug / issue that resets the border values, if you refresh the atlas, that I plan to fix. However, it won't change the underlying issue in NGUI regarding sliced sprites. Note: it will only work in the narrow case of iPad -> iPad Retina. It won't work if your sliced sprites need to be different sizes going from iPad -> iPhone or Android etc.

Unfortunately I don't currently have a solution for sliced sprites, other than to create my own 'sliced sprite' solution.

My recommendation is to use UIImageButton.

Personally I've never used sliced sprites because they don't support the concept of being pixel perfect across different device resolutions. IMO sliced sprites may be initially convenient but once you get an artist working on your buttons / UI they often create art that isn't easy to setup that way.

Having said that, I'd be interested to hear how much this is an issue for other users.

 

Just to clarify my earlier statement, NGUI supports progress bars and sliders without using the sliced sprite. i.e. those will be able to maintain their 'pixel-perfect' size across different screen resolutions.

 

I've just submitted an update which addresses the following:

• Fixed issue with sprite border setting used for sliced sprites. Refreshing atlases no longer resets these values.
• Fixed button label on device window 'Add' now reads 'Add Screen'.

If you are working with sliced sprites and would like to get this fix before the 1.3.1 update goes live please contact me directly via the support email address. Thanks.

 

Yes, because the background typically leaves space for the status bar on iOS, etc. I use UIAnchor center almost always.

 

Thanks for the info.

 

It looks like a bug slipped through on the v1.3.1 update. It breaks the creation of new atlases. Sorry for any inconvenience this has caused.

I've submitted an update to fix this. If you need it fixed now please email me at the contact support address and I'll send you a replacement / drop in file.

 

I have a question on how this works. For example, I have a background that is 960 pixels high, and a background that is 1136 pixels high. Do I put both in the textures folder or something? How does RetinaPro decide which to use?

 

The feature you are referring to is specifically to address the issue where you may have multiple screen resolutions that use the *exact* same atlases (textures).

If you need a specific iPhone 5 background texture then add it to a different atlas or add it to the same atlas but use a different name (like background-568h@2x). You'll have to add a script to use the different background for iPhone 5 by selecting a different sprite name.

Alternatively simply create a unique device for the iPhone 5 resolution and allow RetinaPro to swap the assets via the atlas reference (as it normally does).

 

If you're using v1.3.1 please update. This fixes the bug where you could not create new atlases. Sorry for any inconvenience.

 

Would it be possible to post the perl script you used to scale the images? Or I imagine an AppleScript or PS script would work as well? Just looking for a quicker way than taking a few hours and writing one myself.

Thanks!

 

Please contact me directly via the support email address in the package readme.txt.

 

Are atlases for all devices loaded into memory? Or just the atlas for the current device?

 

It's only the atlas for the current device / screen resolution - everything else is unloaded. One thing to note though is that on launch it will use what was last selected in the editor. I recommend choosing your smallest device resolution prior to building.

If you find additional atlases loaded at runtime it's very likely due to incorrectly referencing a device atlas e.g. 'myAtlas~iPhone@2x' in the UIWidget instead of 'myAtlas'.

 

Hello

Do you have recommend setup of RetinaPro for android devices, as the tutorial given is for IOS devices. I read that "The Sculptor" works great on android with retina pro, I just wonder how it is setup.

Thank you

 

It works the same on either platform. Simply add devices for each device class. On Android you'll typically want to split your devices into groups that share similar screen resolutions (if not identical). A different way to think of it is that each RetinaPro device maps to an atlas group. So if you intend to provide specific art assets for one device then it should be a different device.

When you add a RetinaPro device you then need to add a screen to it. You can add multiple screens per device. At runtime RetinaPro matches the actual live screen resolution to a device type by comparing to the ones you've added. Note: if it can't find one it tries to match the aspect ratio. Check the console log at runtime for more info.

 

Thanks for reply. I currently doing it by swapping atlases with detecting screen width, for example it will swap to use 2x atlases when width > 1024 px. Possible to do the same with retina pro?

 

RetinaPro swaps when it's *equal* to a device screen size. It doesn't support other comparison operators. So you'll need to make sure you add all of the relevant screen sizes to each device type.

Sounds like you probably want to create two RetinaPro devices and then add multiple screen sizes to each one (as desired).

 

Thanks for reply. What about the resolution that not in the lists? As you know, there's many android screen resolution variation out there.

 

The sliced sprites seem to be working now, but I'm still losing my padding every time I hit refresh. Are you recreating all device atlas when I hit refresh? It seems to take quite a long time even if I'm just adding one new image.
Btw, I've just started using Dynamic Fonts with NGUI and from what I understand I have to create different prefabs, with different font sizes, for all the different devices, so it would be really nice if RetinaPro helped me managing these in the same way it works with bmp fonts.

 

Add the screen resolutions that you want to support. If it can't find a match it selects the closest aspect ratio matching device.

 

I think the padding is a separate property - I'll have to investigate that here. It probably requires an additional fix. Sorry.

Yes, it refreshes everything because it doesn't know what edits you've made to the textures, e.g. if you've removed several textures or added new ones. RetinaPro's strength is that you don't have to manage individual assets going into / out of a multiple atlases. However, sometimes the penalty for that is a longer delay when building an atlas. If you think you have something that is taking too long please send me a test / example Unity scene and I will investigate it.

Thanks for the tip. I will have to look into that.

 

Hi Guys,

I've created a new project and imported files from another (working project) system. On import I've been hit with the below error. I've installed the latest NGUI RP, any ideas? Thanks


Assets/RetinaPro/Editor/retinaProAtlasWindow.cs(245,62): error CS0117: `NGUISettings' does not contain a definition for `allow4096'

 

I had the same with my old NGUI. Maybe during import you've overwritten NGUI with an older version?

 

Hi,

Try to use with NGUI 3.0.0e but don't work, some error in files :

RetinaPro/retinaProAtlasController.cs(238,38): error CS1061: Type `UIRoot' does not contain a definition for `automatic' and no extension method `automatic' of type `UIRoot' could be found (are you missing a using directive or an assembly reference?)

work fine with NGUI 2.7.x

Can you update to work with last NGUI version ?

Thanks

 

• requires Unity 4.x (no longer supports 3.5.7)
• tested on NGUI 2.7.0
• retinaProUtil needs to be added to your scene on a game object. Alternatively you can drop the new RetinaProPrefab into your scene (note: this prefab also includes retinaProAtlasController - please remove that from your scene if it's already there.)
• improved retinaProUtil refresh method. Note: this method is no longer static. Should be called like :- retinaProUtil.sharedInstance.refreshAllWidgetsPixelPerfect(myGameObject);
• refreshAllWidgetsPixelPerfect now fixes up atlas and font references for any widgets in the hierarchy
• added bool check for retinaProAtlasController to enable / disable the auto-refresh on startup. This is useful if you want to manage all your updates via the new refreshAllWidgetsPixelPerfect method. When this is off RetinaPro will refresh the active device and fix the UIRoot but will not refresh any atlases or fonts. When this is on it behaves as it previously did.
• fixed issue with sprite padding setting. Refreshing an atlas no longer resets these values.

I'm currently looking at adding support for NGUI 3.x. If I can easily update RetinaPro to support 3.x then it will be available as a free update to existing RetinaPro users. If it requires too many changes (that make it difficult to maintain and test) I will probably end up offering a new package on the Unity Asset Store. Sorry for any inconvenience.

So, if you require Retina Pro with NGUI 3.x support and you haven't purchased this package yet please hold off for now. I should have an idea on what direction I'll go in the next day or so.

 

Sorry you are having issues - please see my thread reply above this one. Thanks!

 

Ok, so it was easier than I thought. I have a drop in replacement for three files. However, it only works if you are running v1.4 (which isn't out yet). Once v1.4 is released if you need NGUI 3.x support please contact me via the email support address and I'll send you the files.

For a future update I'll zip these files and include them as part of the RetinaPro package.

 

• requires Unity 4.x (no longer supports 3.5.7)
• tested on NGUI 2.7.0
• retinaProUtil needs to be added to your scene on a game object. Alternatively you can drop the new RetinaProPrefab into your scene (note: this prefab also includes retinaProAtlasController - please remove that from your scene if it's already there.)
• improved retinaProUtil refresh method. Note: this method is no longer static. Should be called like :- retinaProUtil.sharedInstance.refreshAllWidgetsPixe lPerfect(myGameObject);
• refreshAllWidgetsPixelPerfect now fixes up atlas and font references for any widgets in the hierarchy
• added bool check for retinaProAtlasController to enable / disable the auto-refresh on startup. This is useful if you want to manage all your updates via the new refreshAllWidgetsPixelPerfect method. When this is off RetinaPro will refresh the active device and fix the UIRoot but will not refresh any atlases or fonts. When this is on it behaves as it previously did.
• fixed issue with sprite padding setting. Refreshing an atlas no longer resets these values.

I have a patch that adds NGUI 3.x support. This will be available in the next version. However, if you need it now please contact me via the email support address.

 

How is it going with the NGUI 3.0.4 support? I recently upgraded our project to this version and i'm thinking of supporting more resolutions. Which would make your asset well worth the 10$