Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by idunlop_oefun, Feb 16, 2013.

  1. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Question about how the whole thing works:

    Say I am working with the iPad (1024x768 ) and the iPad Retina (2048x1536), and I have a 800x800 PNG texture. In the game, I want it to be 400x400 for iPad. Do I set the scale of the object in the game as 400x400, and then load a 400x400 version into the iPad atlas and a 800x800 version in the iPad Retina atlas?
     
  2. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    There is no need to manage the scale explicitly.

    RetinaPro manages the art files and atlases for you. On the art side you would typically create the master PSD and from that generate your png's scaled at whatever you need (in your example that would be 800x800 and 400x400 pngs). RetinaPro builds a reference atlas and atlases for each device based on a collection of folders containing your png's.

    Using NGUI you would build your widget (button or sprite etc.) as normal and point it to the atlas reference. At runtime the retinaProAtlasController script refreshes the atlas references based on the device screen size. In the editor there is a preview tool which allows testing of each device screen size.

    I recommend you check out the tutorial video.

     
  3. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
  4. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    RetinaPro for NGUI will save you many hours on a small project and even more on larger projects. RetinaPro provides an easy way for managing large numbers of atlases across many different device sizes.

    Once you start supporting multiple devices (screen sizes) in your project the amount of effort to maintain and fix issues in your atlases explodes.

    1. Setup up your device types which are project wide.
    2. Add your atlas definitions
    3. Add art files into Unity.

    One click to create or refresh an atlas.

    Manage device and atlas settings in the RetinaPro settings panel. Override settings like padding, filtering and texture formats on a per atlas basis.

    Preview option allows you to refresh all of the atlas references to a specific device.

    Contains example scene showing a sample configuration. Includes scripts for runtime loading of atlases.

    Version 1.2.2 Changes:
    • added support for portrait / landscape orientations
    • added retinaProIgnoreUIRoot script. Drop this script on a gameobject that has a UIRoot script attached. Doing this will cause RetinaPro to ignore this UIRoot and thus not modify the manual height setting

    Asset Store Link

     
    Last edited: May 13, 2013
  5. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Are there any Android developers out there that have used this package? I'm interested to know if it worked as expected or you ran into issues.

    Thanks!
     
  6. chiapekharn

    chiapekharn

    Joined:
    Aug 22, 2012
    Posts:
    11
    Hi, do you mind explain how the "Pixel Size" works in the device setting? I'm having a tough time adjusting the sizes and making them pixel perferct =(

    Some screen works just fine and some still have pixel miss alignment, and I have created every single screen resolution to make sure they display correctly.
     
  7. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    "Pixel Size" is a NGUI concept / handling for how atlases are used. Whatever you set as your pixel size in the RetinaPro device setting, will appear in the UIAtlas. Typically you will use a pixel size of 1.0 for non-retina devices and a pixel size of 0.5 for retina devices.

    RetinaPro updates the UIRoot, setting the height to your device height multiplied by the pixel size. Make sure that you use the actual resolution of the device in the RetinaPro device settings. e.g. for an iPhone 4S use a screen size of 640x960 (or 960x640).

    Using the editor you can use the RetinaPro->Preview tool to preview your layouts. At runtime use the retinaProAtlasController script.

    Review the debug log output for some helpful hints as to what RetinaPro is doing at runtime.
     
  8. chiapekharn

    chiapekharn

    Joined:
    Aug 22, 2012
    Posts:
    11
    Thanks!!! :D
     
  9. iwishash1

    iwishash1

    Joined:
    Jul 8, 2012
    Posts:
    11
    Hi,

    I'm using NGUI and my target devices are iphone4, iphone5, ipad series.
    I think it's very useful for making UI between different devices which has different screen resolution.
    Is it useful for different aspect ratio as well?
    I'm making UI based on iphone5 and there is UI panel contents on center of screen which has 600 pixel width (on 1136x640 portrait mode).
    So there's 20pixel of spaces at both sides.
    But when I imported this to iphone4, there's more spaces at left and right side.
    I think it's because iphone4 and iphone5 has different aspect ratio. (3:2 vs 16:9)
    I want fully fit UI panel contents at any devices.

    What is best way for this problem?
    Making 2 kind of atlases with RetinaPro?

    Please show me an advice.
    Thank you.
     
  10. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    RetinaPro matches it's device resolution setting to the current screen resolution. It then selects the atlas for that matched device. You can see what it matches by looking at the console window. If it fails to get a match it then selects based on closest aspect ratio.

    For your specific case it sounds like you need to create two RetinaPro devices. One at 640x960 and the other at 640x1136. Then I'd create a single layout using a UIPanel / widgets and leaving the desired space on the edges. Use NGUI's anchor script etc. for placement.

    If you need a custom behavior for what atlas is selected etc., you could create your own version of retinaProAtlasController.
     
  11. chiapekharn

    chiapekharn

    Joined:
    Aug 22, 2012
    Posts:
    11
    Hi Ian, do you have any tutorial or guide on doing a custom retinaProAtlasController?
     
  12. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Sorry, I don't. It's not a complicated script though. It has some logic for determining which device to use and then it refreshes the atlases and updates the UIRoot. I recommend keeping most of that script identical, but just swapping out the logic for selecting the device based on whatever your criteria is.
     
  13. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    Hey, what about trying to use differents UITextures? it works with them?
     
  14. Deleted User

    Deleted User

    Guest

    Hi, I'm having a problem with iPad resolution, it seems pixel perfect is not working (I have some buttons in the scene and the labels looks just too big, just in iPad res) , all the other resolution works great..

    Thanks.
     
  15. Deleted User

    Deleted User

    Guest

    Never mind it was the pixel size in the font..
     
  16. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Could you elaborate on what you're trying to do?
     
  17. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    I wonder if RetinaPro works also with UITexture (one image not atlases). Because when images are too big you can't put them into atlases, so you have to create UITextures to use them. My question is if I create different size versions of this UITexture I can manage them with RetinaPro?

    Thanks.
     
  18. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Thanks for the explanation. Currently it does not support UITexture. I've always just put very large images into their own atlas. However, I will look into supporting this for a future version of RetinaPro.
     
  19. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    Thanks, I'll really appreciated!
     
  20. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Why is it that when I use Retina Pro and activate the atlas controller, all my fonts enlarge dramatically?
     
  21. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Also, what are the trade-offs of PVRTC compression vs. Automatic TrueColor on iOS devices?
     
  22. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Are you overriding the transform to "scale your font"? NGUI's pixel perfect functionality will change the transform to match the asset size.

    Another possibility is that the screen size doesn't match any of your RetinaPro device sizes. This can occur when you scale the unity editor window. Check the console debug log - verify what device / atlas combination RetinaPro is selecting.
     
  23. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Asset memory size vs. Quality. If you want pristine Photoshop quality artwork rendered pixel perfect then you need to select a non-compressed texture format. I would argue it's critical for all of your UI. However, if you're trying to save space you can use compression.
     
  24. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Does RetinaPro support NGUI's new dynamic font feature?
     
  25. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    No, not yet. Is that the issue you were having?
     
  26. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Well, if I use one font size that is super large and scale down using bilinear filtering, it looks okay, but I cannot use Retina Pro due to the MakePixelPerfect problem.

    I'm guessing I need to create a Font Atlas for each font size that I want to use, which I did. However, when I use point filtering, MakePixelPerfect() makes them block, so it doesn't appear to be working either. One of the font sizes (36) works, but two others (28, 48 ) do not. Any suggestions on why this might be happening and how to fix them?
     
  27. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Correct, you do need to supply the font at different sizes (per device). FWIW, I use GlyphDesigner* which has a command line tool which is great for exporting a font multiple times at different sizes.

    The only issue I've seen is that Unity initially imports the font textures compressed - could that be your issue? Unlike atlas textures, the texture setting on the font that you add to your project is important.

    If that is not your issue, please create a small test project and send it to me. I usually have a quick turnaround on that.


    *I am not affiliated with GlyphDesigner or 71 Squared.
     
  28. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Here's the link to a test project: https://dl.dropboxusercontent.com/u/27638/NGUIFont.zip

    Initially, when I refresh the atlas in Retina Pro -> Atlases, it looks perfect. Then, when I play the scene, it shrinks and blurs the font. Do you know what causes this to happen?
     
  29. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    I tested your scene. When you are hitting 'Play' it displays your font correctly whether you are portrait or landscape. It may appear blurry to you if you do not have enough screen real-estate to display a full iPad Game View in the unity editor.

    When you use the RetinaPro->Preview tool in the editor to refresh the screen and you're viewing the game window in landscape it works correctly. If you switch the game view to portrait it does not show you the correct pixel / perfect size.

    This is a bug with the RetinaPro->Preview tool. I looked at it here and the issue is due to the tool is ignoring the device setting 'Use for Portrait Landscape'. Interestingly, I just fixed that here and it still doesn't work. Debugging it further I discovered that the editor is returning bogus values for the Screen dimensions. Has anyone else seen that issue before?
     
  30. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Hmm, so what kind of filtering do you use for your fonts? What are the export settings you use using GlyphDesigner? I compiled the game I have onto my iPad Retina, and its blocky up to close to the screen. This is with Point Filtering + Automatic Truecolor + RetinaPro On.
     
  31. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    Figured it out, I turned off mip-mapping in texture import settings and increased the Quality Settings on Unity to Best.
     
  32. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    The filtering is handled by the texture importer. Look at the font texture under Textures/rp_atlases. In your supplied test scene they were set correctly - Point filtering.

    As I pointed out above the only time I saw incorrect behavior was when using the RetinaPro Preview tool with a portrait game view. Everything else rendered correctly. When it was rendered incorrectly the text did appear "blocky" due to the label appearing larger than it should and because the texture was set to Point filtering. (FWIW, this issue will be fixed in the next release. I added a work around due to Screen.width / Screen.height failing to return the correct value.)

    Perhaps you could take a screen shot of the issue (showing the entire desktop / not scaled)?
     
  33. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Ah, ok - that makes sense. Glad you figured it out.
     
  34. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    there's a way to just refresh 1 device? it takes longer when you press Refresh because it do it to all the devices.
     
  35. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    Another question: RetinaPro works with specific screen size resolutions? or if the device doesn't have an specific atlas for him are going to use the closest one?

    Apparently there's no support to Dynamic Font, this ones looks huge!
    Thanks
     
    Last edited: Jun 11, 2013
  36. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Understood. No, that would lead to hard to track down inconsistencies when once device behaves a certain way another doesn't. The first thing you would do to address that is double check by refreshing each device. I'd rather have it refresh all devices in one pass. However, feel free to modify that script to suit your own needs.
     
  37. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    RetinaPro first checks your devices against the screen dimensions looking for an exact match. If it does not find an exact match it compares aspect ratios looking for the closest match. Check the debug console for more details at runtime.

    I haven't used dynamic fonts yet and RetinaPro does not specifically handle them. Is there a reason you can't use them directly with NGUI?

    What would you want RetinaPro to do with dynamic fonts?
     
  38. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    Ok, apparently RetinaPro works with Pixel-Perfect so it chages all my asset to their original dimmensions. Is this correct?
     
  39. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    What if I want to use just SD and HD versions.
    Apparently it won't works in this... I should duplicate all asset for each device, isn't?
     
    Last edited: Jun 11, 2013
  40. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Correct. Specifically it calls NGUI's MakePixelPerfect on the widget. This has the effect of changing the transform scale on that game object / widget.
     
  41. aikitect

    aikitect

    Joined:
    Dec 28, 2012
    Posts:
    28
    +1 for the feature request to support UITexture in addition to UIAtlas.
     
  42. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    I'm not sure I understand your request. Can you elaborate and provide specifics?
     
  43. TribeWolf

    TribeWolf

    Joined:
    May 3, 2012
    Posts:
    14
    I have the same question.

    We are making game for iOS and using your plug-in.
    We've made all as it were in your tutorials - added 3 devices (iPad, iPad@2x, iPhone (for 4, 4S and 5)). But when we upload game to iPhone 5 interface stretches weardly. As we understood we need to duplicate every atlases to the ~iPhone5 folder to make it work, isn't it?

    But it means that we will increase build size just for nothing - atlases for iPhone 4, 4S and 5 are exactly the same...

    How can we fix that?

    Another question - does this plug in work with Android? If it so, then how we should work with atlases - on Android you have a great list of display sizes...

    Thank you!
     
  44. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    The general idea with RetinaPro is that you do need a separate atlas for a different screen resolution.

    FWIW, all of the assets (except for fonts) under Assets/Textures don't count towards build or runtime size. However, you are correct that the single atlas textures under Assets/Resources do add to the build size.

    So, right now you would need to add a new device for the iPhone 5 (tall size).

    However, I am working on a potential solution where you can setup a device that is match to an existing device - thus you would create an iPhone 5 device but RetinaPro wouldn't generate an atlas for it. I haven't completed this change yet but I'm guessing it will be in the next version. You could modify the atlas selection in the retinaProAtlasController script for now - it's a fairly simple script. It compares the screen resolution with the devices and selects that.

    Regarding Android support - yes, it works as expected.
     
  45. hellobard

    hellobard

    Joined:
    Sep 26, 2012
    Posts:
    140
    Just wanted to chime in here and let you guys know that this plugin works very well on Android too. I have been testing the Android version of The Sculptor (http://bit.ly/TheSculptorApp), and so far it's been scaling perfectly onto various resolutions. Can't recommend this product enough, it's so easy to deal with various resolutions and get perfect pixels.
     
  46. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Thanks!
     
  47. ThomasBowker

    ThomasBowker

    Joined:
    Jul 6, 2013
    Posts:
    3
    Very nice tool, thanks for making it.

    One small issue that I fixed is at line 123 on retinaProAtlasController.cs.
    Changed the (d < bestAspectDiff) to be a (d <= bestAspectDiff).

    Also I think I might change this script slightly so that I can use one atlas for iPhone4 (960x640) and HD Andriod devices (1280x720) by having it pick the closest atlas and also set nGUIs root height correctly to be pixel perfect.
     
  48. ThomasBowker

    ThomasBowker

    Joined:
    Jul 6, 2013
    Posts:
    3
    Actually I think I misunderstood the purpose of that function, either way I just changed it to pick the atlas with the closest resolution instead of aspect ratio.
     
    Last edited: Jul 6, 2013
  49. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Thanks!

    FWIW, I just finished an update which I should be submitting today that allows for multiple resolutions per device. You can now group together devices that have differing aspect ratios and make them use the same atlas (like iPhone 4 / iPhone 5).
     
  50. idunlop_oefun

    idunlop_oefun

    Joined:
    Aug 31, 2010
    Posts:
    240
    Yes, it's intended for choosing the closest aspect ratio. But definitely change it to whatever you need. Please see my comment above for information on the new version which I believe will give you better control over this issue.