PowerUI Manager - Revision history

151.229.136.200 at 16:56, 4 April 2017

2017-04-04T16:56:04Z

151.229.136.200: /* Automatic DPI real world example */

2017-04-04T16:12:53Z

‎Automatic DPI real world example

151.229.136.200: /* Automatic DPI real world example */

2017-04-04T16:09:16Z

‎Automatic DPI real world example

151.229.136.200 at 15:51, 4 April 2017

2017-04-04T15:51:47Z

151.229.136.200: /* Automatically handling DPI */

2017-04-04T15:51:19Z

‎Automatically handling DPI

151.229.136.200: /* Automatically handling DPI */

2017-04-04T15:01:54Z

‎Automatically handling DPI

151.229.186.156 at 18:30, 13 January 2017

2017-01-13T18:30:46Z

151.229.186.156 at 18:30, 13 January 2017

2017-01-13T18:30:30Z

151.229.186.156: Created page with "On the PowerUI Manager component, you'll see two options - HTML File and URL. You can pick one or the other. Typically, you'll actually want to use the URL option, but first a..."

2017-01-13T15:35:38Z

Created page with "On the PowerUI Manager component, you'll see two options - HTML File and URL. You can pick one or the other. Typically, you'll actually want to use the URL option, but first a..."

New page

On the PowerUI Manager component, you'll see two options - HTML File and URL. You can pick one or the other. Typically, you'll actually want to use the URL option, but first a health warning:

'''Warning!''' Especially with the main UI, your URL should be local URL's only. Typically that means using the [[Resources Protocol|resources:// protocol]]. The bonus of using a URL instead of a file is that all relative URLs "just work" nicely - you can potentially preview your UI in a browser because of that too. When you use the Html File option, the apparent document.location is just "resources://".

Watch For Changes

If you use a HTML File and tick the "watch for changes" option, PowerUI will automatically reload the UI for you whenever it is saved whilst the game is running. This can be very convenient for quickly testing iterations. Keep in mind, though, that it will completely ignore any state information (for example, if you logged in and it loaded some other UI). It's very similar to hitting refresh, but just for the UI only.

Automatically handling DPI

There's now a wide variety of screen pixel densities - from the classic 72dpi to e.g. retina displays at 144dpi. Many mobile devices go well beyond that. If you'd like your UI to appear a '''similar physical size''' across all devices, simply tick this box. Internally, it sets the default value for CSS zoom:auto. That affects the 'real' value of CSS px and all the other units which derive from it.

Note that on some platforms (particularly most desktops), Unity and PowerUI are forced to assume 72dpi. This happens because a desktop can have multiple screens and each has its own pixel density (one might even be a projector). We have no way of knowing what the real density is. That's different from all-in-one's or mobile devices, as they have fixed knowledge about the screen they're displaying on.

Length Scale

Like automatically handling the DPI, this directly sets the default value for CSS zoom:auto. So, if you set it to 2, it's like zoom:200%. If you use a value ''and'' have automatic DPI handling, they get multiplied together.

@@ Line 17: / Line 17: @@
 == Automatic DPI real world example ==
-I have 3 screens; one is 96dpi and the other two are 72dpi. Unity declares [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi] as 72 ''because a 72dpi screen is the primary one''. So, when the Unity editor is on the 72dpi screen and auto DPI is on, the physical sizes look correct. When the Unity Editor is then dragged to the 96dpi screen, it's slightly off (as Unity's dpi is still 72). Here's a visual comparison of that:
+Here's a desktop, phone and super cheap tablet with auto DPI on:
 [[File:WhatAutoDpiDoes.jpg]]

@@ Line 21: / Line 21: @@
 [[File:WhatAutoDpiDoes.jpg]]
-It makes a lot of sense to shape your game view to the approximate ''physical size'' of the device(s) you're currently designing for, but just keep in mind that most desktops are always a close approximation.
+It makes a lot of sense to shape your game view to the approximate ''physical size'' of the device(s) you're currently designing for - there's no better way to get a solid idea of what it will look like - but just keep in mind that desktops are considered a close approximation because of 2+ screens.
 == Length Scale ==
 Like automatically handling the DPI, this directly sets the default value for CSS zoom:auto. So, if you set it to 2, it's like zoom:200%. If you use a value ''and'' have automatic DPI handling, they get multiplied together.

@@ Line 17: / Line 17: @@
 == Automatic DPI real world example ==
-I have 3 screens; one is 96dpi and the other two are 72dpi. Unity declares [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi] as 72 ''because a 72dpi screen is the primary one''. So, when the Unity editor is on the 72dpi screen and auto DPI is on, the physical sizes look correct. When the Unity Editor is then dragged to the 96dpi screen, it's slightly off (as Unity has no idea which of the three DPI's to correctly report). Here's a visual comparison of that:
+I have 3 screens; one is 96dpi and the other two are 72dpi. Unity declares [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi] as 72 ''because a 72dpi screen is the primary one''. So, when the Unity editor is on the 72dpi screen and auto DPI is on, the physical sizes look correct. When the Unity Editor is then dragged to the 96dpi screen, it's slightly off (as Unity's dpi is still 72). Here's a visual comparison of that:
 [[File:WhatAutoDpiDoes.jpg]]
-So, provided your screens physical DPI matches whatever Unity reports for [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi], it makes a lot of sense to shape your game view to the approximate ''physical size'' of the device you're currently designing for.
+It makes a lot of sense to shape your game view to the approximate ''physical size'' of the device(s) you're currently designing for, but just keep in mind that most desktops are always a close approximation.
 == Length Scale ==
 Like automatically handling the DPI, this directly sets the default value for CSS zoom:auto. So, if you set it to 2, it's like zoom:200%. If you use a value ''and'' have automatic DPI handling, they get multiplied together.

@@ Line 15: / Line 15: @@
 Note that on some platforms (particularly most desktops), Unity and PowerUI are forced to assume 72dpi. This happens because a desktop can have multiple screens and each has its own pixel density (one might even be a projector). We have no way of knowing what the real density is. That's different from all-in-one's or mobile devices, as they have fixed knowledge about the screen they're displaying on.
-'''Real life example:''' I have 3 screens; one is 96dpi and the other two are 72dpi. Unity declares [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi] as 72 ''because a 72dpi screen is the primary one''. So, when the Unity editor is on the 72dpi screen and auto DPI is on, the physical sizes look correct. When the Unity Editor is then dragged to the 96dpi screen, it's slightly off (as Unity has no idea which of the three DPI's to correctly report). Here's a visual comparison of that:
+== Automatic DPI real world example ==
 [[File:WhatAutoDpiDoes.jpg]]

@@ Line 15: / Line 15: @@
 Note that on some platforms (particularly most desktops), Unity and PowerUI are forced to assume 72dpi. This happens because a desktop can have multiple screens and each has its own pixel density (one might even be a projector). We have no way of knowing what the real density is. That's different from all-in-one's or mobile devices, as they have fixed knowledge about the screen they're displaying on.
-'''Real life example:''' I have 3 screens; one is 96dpi and the other two are 72dpi. Unity declares [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi] as 96. As I just happen to have the Unity Editor on the 96dpi screen, it's correct - if it was on some other screen, or if it was straddling two of them, it wouldn't be (thus the issue with multiple screens). With auto DPI ticked, the physical size of elements is exactly the same for me in the Unity Editor as a build on a phone or tablet, so it makes a lot of sense to shape your game view to the approximate ''physical size'' of the device you're currently designing for.
+'''Real life example:''' I have 3 screens; one is 96dpi and the other two are 72dpi. Unity declares [https://docs.unity3d.com/ScriptReference/Screen-dpi.html Screen.dpi] as 72 ''because a 72dpi screen is the primary one''. So, when the Unity editor is on the 72dpi screen and auto DPI is on, the physical sizes look correct. When the Unity Editor is then dragged to the 96dpi screen, it's slightly off (as Unity has no idea which of the three DPI's to correctly report). Here's a visual comparison of that:
 == Length Scale ==
 Like automatically handling the DPI, this directly sets the default value for CSS zoom:auto. So, if you set it to 2, it's like zoom:200%. If you use a value ''and'' have automatic DPI handling, they get multiplied together.

← Older revision		Revision as of 18:30, 13 January 2017
Line 16:		Line 16:


−	~~<strong>~~Length Scale~~</strong>~~	+	== Length Scale ==

	Like automatically handling the DPI, this directly sets the default value for CSS zoom:auto. So, if you set it to 2, it's like zoom:200%. If you use a value ''and'' have automatic DPI handling, they get multiplied together.		Like automatically handling the DPI, this directly sets the default value for CSS zoom:auto. So, if you set it to 2, it's like zoom:200%. If you use a value ''and'' have automatic DPI handling, they get multiplied together.

@@ Line 4: / Line 4: @@
-<strong>Watch For Changes</strong>
+== Watch For Changes ==
 If you use a HTML File and tick the "watch for changes" option, PowerUI will automatically reload the UI for you whenever it is saved whilst the game is running. This can be very convenient for quickly testing iterations. Keep in mind, though, that it will completely ignore any state information (for example, if you logged in and it loaded some other UI). It's very similar to hitting refresh, but just for the UI only.
-<strong>Automatically handling DPI</strong>
+== Automatically handling DPI ==
 There's now a wide variety of screen pixel densities - from the classic 72dpi to e.g. retina displays at 144dpi. Many mobile devices go well beyond that. If you'd like your UI to appear a '''similar physical size''' across all devices, simply tick this box. Internally, it sets the default value for CSS zoom:auto. That affects the 'real' value of CSS px and all the other units which derive from it.