[REG-2194] Improved SDK UI on mobile #362

addisonbgross · 2024-11-26T17:49:53Z

In an effort to improve our demos to potential clients building mobile games, I've made the UI a bit larger when running on a mobile device. This is definitely not a comprehensive solution, but it is a small win.

What has been done

We can detect when a game is running on a mobile device, or in the Unity Device Simulator
When on mobile or using the Unity Device Simulator:
- Scale everything in our UI to be larger
- Disable the edit, copy, and delete actions for Sequences
- Hide the 'create sequence button'. Creating or editing Sequences on mobile is too cramped
When the Unity viewport is in a portrait orientation:
- Scale everything in our UI to be larger

Screenshots

These were taken on my old OnePlus 7. Tested with both our Match3Example game, and the Vampire Survivors Clone I was testing out recently

vontell

Just a comment/conversation on when this should be applied - TLDR I want to make sure that portrait mode in the editor is still usable?

vontell · 2024-11-26T18:23:30Z

src/gg.regression.unity.bots/Runtime/Scripts/RGUtils.cs

+        // </summary>
+        public static bool IsMobile()
+        {
+            return Application.platform == RuntimePlatform.Android || Application.platform == RuntimePlatform.IPhonePlayer;


I don't mind this, but this won't solve the problem for developers making mobile games in the editor. I suppose my biggest concern is more "portrait mode" than mobile specifically (i.e. just making sure our UI is usable for vertical devices)

This seems to assume that they're using portrait mode on mobile, but many games work in landscape mode as well.

Let's evaluate how we trigger this functionality.

You can also use the 'simulator' function in the Unity IDE to test out various tablet/phones/etc and rotate them back and forth. There are APIs for detecting said rotations and positions available.

vontell · 2024-11-26T18:24:26Z

src/gg.regression.unity.bots/Runtime/Scripts/RGOverlay/RGSequenceManager.cs

@@ -91,6 +94,11 @@ public void Awake()

    public void Start()
    {
+        if (RGUtils.IsMobile())


In relation to the comment I make at the end of this file, I suppose what I am thinking might be if (RGUtils.IsMobile() && is in portrait mode, i.e. screen height is larger than screen width)

nAmKcAz · 2024-11-26T19:22:02Z

src/gg.regression.unity.bots/Runtime/Scripts/RGUtils.cs

+        // </summary>
+        public static bool IsMobile()
+        {
+            return Application.platform == RuntimePlatform.Android || Application.platform == RuntimePlatform.IPhonePlayer;


This seems to assume that they're using portrait mode on mobile, but many games work in landscape mode as well.

Let's evaluate how we trigger this functionality.

You can also use the 'simulator' function in the Unity IDE to test out various tablet/phones/etc and rotate them back and forth. There are APIs for detecting said rotations and positions available.

nAmKcAz · 2024-11-26T21:08:06Z

src/gg.regression.unity.bots/Runtime/Scripts/RGOverlay/RGSequenceManager.cs

+        {
+            SetMobileView();
+        }
+        else if (RGUtils.IsPortraitView())


Here @addisonbgross , I think this should be an if

I dropped a comment below that will hopefully address this comment 🤞🏻

nAmKcAz · 2024-11-26T21:08:31Z

src/gg.regression.unity.bots/Runtime/Scripts/RGOverlay/RGSequenceManager.cs

+     */
+    public void SetMobileView()
+    {
+        GetComponent<CanvasScaler>().referenceResolution = new Vector2(800, 600);


mobile does not imply portrait

From what I'm reading, since our Canvas Scaler component has its match field set to 0.5, the scaling will be the same if the viewport is 800 x 600 or 600 x 800. In practice it seems to scale the same

i still don't understand why mobile and portrait are being tied together, they aren't related

For clarity regarding clarity on portrait vs mobile concerns, and since the first operation of this function is identical to that of SetPortraitView, I wonder if it may be better to instead do the following:

Rename SetPortraitView() to "UpscaleUI" or something just to represent the operation of making things better.

Then in this SetMobileView() function, you deactivate things

Not something I'm too worried about so this is a nit, but it could make things more clear wrt to the comments that Zack had

@vontell good call on the function rename, done 👍🏻

@RG-nAmKcAz the portrait and mobile connection is that I'm making it so that the UI is scaled to be larger in both scenarios. When running a build on mobile, scale the UI up (and change a few other small things). When running a game in Unity + the viewport is in a portrait orientation, scale the UI up.

The overall goal is just to make the UI a bit larger in situations where it becomes harder to use (eg: on a small screen). Hopefully I've made some sense

addisonbgross · 2024-11-26T21:26:25Z

@vontell @RG-nAmKcAz, I've made some changes. Please let me know if these 'rules' make sense:

When on mobile or using the Unity Device Simulator:

Scale everything in our UI to be larger
Disable the edit, copy, and delete actions for Sequences
Hide the 'create sequence button'. Creating or editing Sequences on mobile is too cramped

When the Unity viewport is in a portrait orientation:

Scale everything in our UI to be larger

I don't think we should disable anything if the game isn't running on mobile, but is in a portrait orientation. Curious to hear what you both think

vontell · 2024-12-01T02:14:42Z

src/gg.regression.unity.bots/Runtime/Scripts/RGOverlay/RGSequenceManager.cs

+     */
+    public void SetMobileView()
+    {
+        GetComponent<CanvasScaler>().referenceResolution = new Vector2(800, 600);


For clarity regarding clarity on portrait vs mobile concerns, and since the first operation of this function is identical to that of SetPortraitView, I wonder if it may be better to instead do the following:

Rename SetPortraitView() to "UpscaleUI" or something just to represent the operation of making things better.

Then in this SetMobileView() function, you deactivate things

Not something I'm too worried about so this is a nit, but it could make things more clear wrt to the comments that Zack had

nAmKcAz

No, it doesn't make sense, but just merge it

Mobile does not in any way imply that my screen is in portrait layout. So having code that says.. if mobile, scale UI in a way that implies portrait wouldn't work out well

If you want to 'upscale' the UI on mobile, the code should do so in a way that explicitly maintains the current aspect ratio of the mobile device, not sets a portrait aspect ratio.

If you want to 'upscale' only when the screen layout is portrait mode, then the code should do so only when the layout is portrait mode.

addisonbgross · 2024-12-02T18:11:25Z

@RG-nAmKcAz I see your point. I've made the scaling code more explicit, and so that it doesn't imply an incorrect aspect ratio

feat: large UI on mobile

fb7c7da

addisonbgross requested review from nAmKcAz and vontell as code owners November 26, 2024 17:49

addisonbgross requested review from batu and abeizer November 26, 2024 17:50

vontell reviewed Nov 26, 2024

View reviewed changes

nAmKcAz requested changes Nov 26, 2024

View reviewed changes

addisonbgross added 3 commits November 26, 2024 13:57

feat: account for device simulator

f5166fd

feat: reduce portrait view restrictions

68dd3a9

feat: fix up comment

004541d

nAmKcAz reviewed Nov 26, 2024

View reviewed changes

addisonbgross requested a review from vontell November 26, 2024 21:28

vontell approved these changes Dec 1, 2024

View reviewed changes

feat: rename ui scaling function

a37e385

nAmKcAz approved these changes Dec 2, 2024

View reviewed changes

feat: make ui scaling code more explicit

c6732df

addisonbgross merged commit dae0311 into main Dec 2, 2024
2 checks passed

addisonbgross deleted the addison/reg-2194 branch December 2, 2024 18:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[REG-2194] Improved SDK UI on mobile #362

[REG-2194] Improved SDK UI on mobile #362

addisonbgross commented Nov 26, 2024 •

edited

Loading

vontell left a comment

vontell Nov 26, 2024

nAmKcAz Nov 26, 2024

vontell Nov 26, 2024

nAmKcAz Nov 26, 2024

nAmKcAz Nov 26, 2024

addisonbgross Nov 26, 2024

nAmKcAz Nov 26, 2024

addisonbgross Nov 26, 2024

nAmKcAz Nov 26, 2024

vontell Dec 1, 2024

addisonbgross Dec 2, 2024

addisonbgross commented Nov 26, 2024

vontell Dec 1, 2024

nAmKcAz left a comment

addisonbgross commented Dec 2, 2024

[REG-2194] Improved SDK UI on mobile #362

[REG-2194] Improved SDK UI on mobile #362

Conversation

addisonbgross commented Nov 26, 2024 • edited Loading

What has been done

Screenshots

vontell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

addisonbgross commented Nov 26, 2024

Choose a reason for hiding this comment

nAmKcAz left a comment

Choose a reason for hiding this comment

addisonbgross commented Dec 2, 2024

addisonbgross commented Nov 26, 2024 •

edited

Loading