GithubHelp home page GithubHelp logo

5argon / notchsolution Goto Github PK

View Code? Open in Web Editor NEW
664.0 26.0 91.0 34.39 MB

A set of components and tools to solve notched/cutout phones layout problems for Unity.

Home Page: http://exceed7.com/notch-solution

License: MIT License

C# 98.29% CSS 1.71%

notchsolution's Introduction

Notch Solution

Main screenshot

A set of components and tools to solve notched/cutout phones layout problems for Unity.

Whether you like it or not, the time has come for us designers to design in context of a notch and embrace it instead of hiding it. This tool also enables design-time preview which help you iterate your design without building the game.

Official website : http://exceed7.com/notch-solution/

Questions/Problems/Suggestions : [email protected] Discord : https://discord.gg/J4sCcj4

Easy way to pay for this software

Are you looking for a way to say thanks to this open source work other than code contribution?

It is easy! You can take a look at my myriad of niche Unity Asset Store audio plugins in my publisher page, grab something for your game, or tell your audio-caring friends about them. Thank you!

How to use

With internet connection you should visit : http://www.exceed7.com/notch-solution

Without internet connection, the website mentioned was generated from files in a hidden folder. Currently you may see it in a zipped form Documentation~.zip, because Asset Store do not support publishing unimported folders yet so I have to zip them to make them go together.

Please unzip it to access the documentation. Also you can unzip Samples~.zip to access unimported samples, which you can copy them to your project to make them actually import.

After you get a Documentation~ folder, you can read them in their Markdown form from your code editor. Markdowns are human readable by design. They won't be imported to Unity too, as the folder has a trailing ~. It is great because Unity will not create .meta files for them and not import tutorial texts and images, they are not a part of your game. The same goes to unzipped Sample~ folder, they are not supposed to import until you want to see them. This format is currently the best practice.

With an IDE like Visual Studio Code, you can use "Markdown: Open Preview to the Side" to even display a nicely rendered Markdown with images working properly. Navigate by clicking on different files on the folder tree.

License

MIT

notchsolution's People

Contributors

06games avatar 5argon avatar benwoodford avatar froghut avatar hiros-neko avatar jameskim2998 avatar johannesdeml avatar jollymz avatar mmatvein avatar robinnorth avatar sssooonnnggg avatar wagenheimer avatar yasirkula avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

notchsolution's Issues

Does it work on S10?

We tried your game on the S10, and it seems the top right button did stay covered by the notch

image

Make it work without Notch Simulator tab open, then enable shortcut notch preview

Since 2019.1 is the minimum version to build a game with notch support, it would be nice if we could use shortcut to toggle the notch preview instead of Notch Simulator panel.

The current problem is that the update sending is in OnGUI of that Notch Simulator panel. We have to find a better place for both simulator panel and shortcut to call and updates all INotchSimulatorTarget.

Notch overlay should not show up while in non-UI Prefab Stage

Screenshot 2019-06-21 21 19 27

The root is not a RectTransform so this is not a prefab stage for designing UI, yet the overlay didn't check for this. It should find some way to check if we are using the prefab design scene for UI or not. I haven't check if it is possible from the API, or we must observe the root and make hacky assumption?

(So ideally, I want to know which of the following scenes is being used. I think I saw a scene property somewhere while making the prefab mode support around the PrefabStage experimental API. But even if we know the scene, how to compare with this settings?)

Screenshot 2019-06-21 21 22 07

New component planned : SafePosition

If done right, it may serve the purpose of #18 as well.
I have think about the design more. I think it should be a new component that :

  • Instead of driving itself's RectTransform (and rely on child object anchoring to it), instead this component will drive all its child similar to HorizontalLayoutGroup, etc.
  • This allows us to select which cutout / side of the screen to based on, on the component. Then further allows us to customize the child by attaching something similar to how LayoutElement works.
  • If on 2019.1 instead of .2, has a fallback to safe area. In effect, the previous point we need to select a side, not a cutout. Then that side will try to figure out how many cutouts are there, and what to do. We can't select a cutout, it's not ubiquitous enough. (For example if I made a field that says adapt to the top center cutout, now will fails on Galaxy S10 where the cutout is not at the center? If it is large enough (how much?) will it be considered center?
  • Selecting a side works like adaptation component, where you can also choose to take account of an opposite side.
  • The name should not contain the word "safe area" but instead "cutout". Because this should be cutout-first then fallback to safe area. SafeAreaPadding naming is correct because it only cares about safe area, and also cannot be extended to use cutouts. I think it is already completed on its own.
  • It should have a concept of "fitting". What I want to use is something like : "do nothing if it fits in the top left corner without overlapping with any cutout, or move down if it overlaps."
  • Fitting resolution by moving down (away from that side) seems to be always possible, but what about moving in parallel with the side? For example, I want the top-right anchored UI to instead move left instead of down, if the player used Galaxy S10+, which has a punched hole at the corner, moving left until the hole is not in the way.
  • In effect, I may have to categorize the cutout into corner and center category. All category can make things move down, but only corner cutout could do fitting with down or parallel resolution mode.

I already have my use case. With only SafeAreaPadding, I designed so that the corner "Garden" button should be able to stay still at any situation.

Screenshot 2019-08-11 15 26 48

This assumption is wrong, since a device like S10+ puts a hole there. So I need to put it under SafeAreaPadding and move down. However, it now looks not as good on iPhone X as it moves down even though there is enough space on the corner.

The solution is this new component which I will say, please try to "fit" the top right corner within this X width. If you can't, move it down. If on 2019.1 instead of .2 then always move it down.

This is getting very complicated...

Shortcut doesn't work in play mode sometimes

I don't know if it is related to some key conflict or really a bug, but I have reported here because I could repro it 100% on a new project with a shortcut that Debug.Log, it stopped working in play mode : https://fogbugz.unity3d.com/default.asp?1157429_3t3sf1kt96j23b12

Sometimes out of play mode, I also got into a state where I have to push the shortcut multiple times to register. (When it didn't register, the OS plays "invalid" sound effect) This one I can't reproduce consistently.

180 Degree rotation does not trigger OnRectTransformDimensionsChange()

The rect need to recalculate using a new Screen.safeArea and Screen.cutouts when rotation changed. Contrary to 90 degree rotation which will be very rare, it is much more common for a game to allow 180 degree orientation change. (e.g. allow the player to avoid hand occluding speaker while playing, depending on phones)

But I just found that "dimension" of the rect didn't change in 180 degree case so this OnRectTransformDimensionsChange() do not get called. And therefore we have nothing to catch this event. Unity didn't expose any event that could catch this. Despite what the internet says. (Tested on Android, 2019.3, S10+)

  • Check device orientation in Update repeatedly and monitor orientation : wasteful, not instantaneous, and unprofessional.
  • Ask the developer to lock the orientation and use code to rotate manually in response to gyro or some buttons in the game, then call a specially prepared method to refresh all rects : weird
  • Make a magic rect beacon that guarantees changing its dimension on every rotation (how?), and then we maybe able to keep using OnRectTransformDimensionsChange() and relay rebuild information to all rects : I think this is impossible as the Canvas could only response to Screen size, and on 180 rotation the screen size will not change by definition. The canvas should not even redraw in this case and therefore no such magic responsive rect can exist under it. (?)
  • Write a native plugin for Android and iOS to catch native event : painful but likely the only proper solution.

Configuration switch : automatically sets GameView

The configuration system where it switch between different simulated device with a hotkey was added a while ago. In exchange the GameView do not change along with it, so the overlay will almost look certainly malformed.

Previously it is an inverse, the GameView could be switched back and forth between 2 configurations, but overlay stays.

The next plan is for Notch Solution to have its own GameView entry called "Notch Solution (w*h)" instead of having the user to define them and remember their index to config. This is a single entry which keep deleting itself and refresh with a new one when a configuration switch occurs. Most of this work has to be via reflection hacking to GameView API.

SafeAreaPadding's "Unlocked" mode

Theoretically, it should be possible to make a side completely unlocked. Currently Zero is literally locking that side to 0 and doesn't allow you to move or animate it. It would be useful because mostly you only care of a single edge yet all other edges are stretched out or locked.

However layout programming is a lot of mind fucks and I don't think I want to tackle this problem right now.. the current implementation I belive already contains a lot of hacks that works just because I lock all sides.

For starters, the RectTransform system actually express the offset of one side as a combination of size delta and anchored position that in turn related to your pivot, so you dragging one side casually actually results in multiple value changes inside. Making this not trivial to implement.

Modernizing the package, synchronizing with website

At the same time to make this an Asset Store package, I want to setup "the dream pipeline" such that :

  • The structure follows https://docs.unity3d.com/Manual/cus-layout.html and https://www.youtube.com/watch?v=22HIEQTyozQ (for Samples folder)
  • There is an .md documentation inside the package itself, so you know how to use everything even without internet and even inside IDE. (This is the present state)
  • Design those .md so that it could generate a website/most part of website that I will self host. This website will provide much better SEO than this GitHub page. (And more colorful identity, etc.)
  • The same but also generates Asset Store promotional text easily. Especially for images, there should be a pipeline that take some pictures from the md documentation to be Asset Store images.
  • The generator could possibly run through the Runtime folder and generate API documentation as well as I have already put a lot of C# XML comments in. Not sure how.
  • The website could be opened by clicking View Documentation in UPM window.
  • Also View changelog should work (how?). The corresponding changelog in the website must be able to be generated from CHANGELOG.md that I am keeping currently.
  • Use the Release section in GitHub to host all versions of Asset Store releases because Asset Store still don't have previous version function.

In summary, I want minimal effort maintaining the website as much as possible such that the package itself is a single source of truth.

Alt+M resolution switch did not refresh the scale zoom

This is not a problem if the target resolution is a ratio, but if it is a fixed pixels, it requires one more manual update for it to go back to filling the screen. Have to find some other internal methods that force the update after switching.

licecap

New component planned : EdgeSplit

An in-dev component (currently) called SafePosition (#35) can control anchoredPosition that it will move perpendicularly from the edge if its width cause it to overlap with non-safe area or any cutouts.

But there are some design that you would rather move left or right (parallel, not perpendicular) along the edge to resolve cutout problems. For example one common desire is to fit a clock or something on the hole on the corner of iPhoneX, not by moving down from the hole leaving it empty. But on S10+, you want to move the clock a bit left.

But the way of moving it depens on device. If we design a rect which compress itself to the width of "hole" (like the corner of iPhone X) what would happen if it is instead on S10+ where essentially there is no hole to fit? How to design a component so that it works for all devices? As opposed to having to attach HoleFit to not move but scale the size to fit on iPhone, and MoveParallel to not scale but move to the left (or right) on S10+?

I have decided on a design according to this fact :

  • Cutouts cannot be on short edge. (Google defined)
  • There can only be one cutout per edge. (Google defined)

Therefore there are 3 possible case of spaces along the edge :

  1. [Space][**Notch**][Space] (iPhoneX, Note 10+, many other phones)
  2. [**Notch**][Space] (No one put notch at left side yet?)
  3. [Space][**Notch**] (S10+)

So if we think like this :

  1. [Space1][**Notch**][Space2]
  2. [**Notch**][Space1][Space2]
  3. [Space1][Space2][**Notch**]

i.e. even with 1 space, we treat it like 2 spaces joining together. Then it is possible to design a component which controls 2 spaces and join/split them. Therefore a name is currently called EdgeSplit because you select an edge and specify 2 children RectTransform, then it will try to split or join them.

When joined, there will be some settings (not designed yet) to say which one got more or less space. Possibly by the built in LayoutElement where you can give them min size then we allocate remaining spaces in some way. When split, the width will be fully stretched along the edge for both.

Unlike SafePosition where it partly works with 2019.1 (always move down equal to safe area, don't care about cutouts but they should be inside the safe area) this one requries cutouts API and will do nothing at all on 2019.1

Upgrade from 2019.2 to 2019.3 throws exceptions in console on launch

This also upgraded the package to the latest master branch commit because I use the git URL in my package.json.

Exception thrown while invoking [DidReloadScripts] method 'E7.NotchSolution.NotchSimulator:OnScriptsReloaded ()' : NullReferenceException: Object reference not set to an instance of an object
E7.NotchSolution.NotchSimulator.EnsureCanvasAndEventSetup (UnityEditor.Experimental.SceneManagement.PrefabStage prefabStage) (at Library/PackageCache/com.e7.notch-solution@f733ffcdcb9029548c124c17cbe2272bb5c39f65/Editor/NotchSimulator.cs:328)
E7.NotchSolution.NotchSimulator.UpdateAllMockups () (at Library/PackageCache/com.e7.notch-solution@f733ffcdcb9029548c124c17cbe2272bb5c39f65/Editor/NotchSimulator.cs:244)
E7.NotchSolution.NotchSimulator.OnScriptsReloaded () (at Library/PackageCache/com.e7.notch-solution@f733ffcdcb9029548c124c17cbe2272bb5c39f65/Editor/NotchSimulator.cs:223)

UpdateRect is ignored on the first frame.

On first frame just after changing scene, UpdateRect() is skipped because IsActive() is returning false.

if (!IsActive()) return;

This is very weird cause both enabled and activeInHierarchy of SafeAreaPadding are true. You can see variables on below images I took. 🤔
image
image

This can be reproduced on Unity 2019.1.10f1. I think this might be just another Unity bug, but this leads jittering UI layout and buggy layout calculation. This bug can be prevented by replace IsActive() with enabled && gameObject.activeInHierarchy. 😓

Asset gives Error and does not work in Unity 2020.2.0f1

When I import the asset in Unity 2020.2.0f1 it gives me below mentioned error. I tried reopening the project but it still gives the same error.

Exception thrown while invoking [DidReloadScripts] method 'E7.NotchSolution.Editor.NotchSimulator:OnScriptsReloaded ()' : NullReferenceException: Object reference not set to an instance of an object

Also, the it does not work correctly in Unity 2020.2.0f1.

Adding per-aspect ratio overlay

pref

I have added a new shortcut to switch aspect ratio while you design. But what's better would be make an enum selector under those integer to assign an overlay mockup that should go with it.

Currently, switching aspect works out fine but the iPhone mockup may ended up being used with iPad aspect ratio, for example. If it changes the active mockup also on switch, this tool would be better.

Also change that integer field to a drop down but I am too lazy to do reflections at this time. (I'm in quite a pressing schedule..)

The cutout sink when Game view has its bottom or right edge without padding

I found probably an another Unity bug where the bottom and right edge of game view could sink away depending on how small the view is. I have already reported this and I believe it is not my mistake. Look at this gif, small enough and you could even make the bottom iPad Pro bar disappear completely. (Should not be possible with stretched anchor points + scale with screen size canvas)

licecap1

Moving from Open Collective to Asset Store-based donation

With the latest #11 hot fix, I think I have cleared all annoying blockers to be more publicly used by casual users. Maybe it is time to make it an Asset Store package.

This package would be priced at the lowest possible that is not 0 (4.99$) as a donationware, donated by purchasing it. What you get from purchasing is just that you can use update button from Unity. In the description, it would say this asset is actually free and you can get it from GitHub, if you don't want to contribute or want to contribute in an other way.

Then I will remove Open Collective as I think it is kinda too much. It is more suited for project that benefits many more people. (Though I do think this project should be like that considering phones nowadays always putting notches on)

Exception thrown while invoking

Exception thrown while invoking [DidReloadScripts] method 'E7.NotchSolution.Editor.NotchSimulator:OnScriptsReloaded ()' : NullReferenceException: Object reference not set to an instance of an object
E7.NotchSolution.MockupCanvas.UpdateMockupSprite (UnityEngine.Sprite sprite, UnityEngine.ScreenOrientation orientation, System.Boolean simulate, System.Boolean flipped, UnityEngine.Color prefabModeOverlayColor) (at Library/PackageCache/com.e7.notch-solution@c5feabc4a6/Runtime/Base/MockupCanvas.cs:27)
E7.NotchSolution.Editor.NotchSimulator.UpdateAllMockups () (at Library/PackageCache/com.e7.notch-solution@c5feabc4a6/Editor/Simulator/NotchSimulator.cs:327)
E7.NotchSolution.Editor.NotchSimulator.OnScriptsReloaded () (at Library/PackageCache/com.e7.notch-solution@c5feabc4a6/Editor/Simulator/NotchSimulator.cs:269)

Some preferences belongs to the project and not user

Along with #25 , settings like the 2 layouts quick-switch is technically not a per-user settings, but rather per project. So the SettingsProvider should be splitted to the project menu accordingly. (The scene view overlay color however I think is really a per-user thing.)

SceneVis option

Unity team said that SceneVis API would be in 2019.2. So I would like to add a preference option where you could prevent the mockup from showing up in the Scene view by turning off the SceneVis.

It is sometimes annoying when you toggle the overlay and a big border appears on top of smaller world-object you are making, as in this gif :

aspadapt-1

Release new version and tag for OpenUPM

There are new commit since last year but no new tagged release for the new version, so OpenUPM can't pick it up. Please make a tagged release for version 2.0.0. Thanks.

Not working in Unity 2019.4.40 LTS

Error when importing package, not compiling.

Library\PackageCache\com.e7.notch-solution@35d64dd\Editor\Simulator\NotchSimulator.cs(433,55): error CS0246: The type or namespace name 'PrefabStage' could not be found (are you missing a using directive or an assembly reference?)

Make it works in the Prefab Mode

Increasingly it is very useful to design a UI in the prefab mode, when you planning to assemble multiple UI to a single scene instead of doing multi scene like before.

If those pieces are full screen panel, likely that they will be with SafeAreaPadding. So, I would like to make this work in the prefab mode. What's the problem ?

  • The overlay is added as a hidden + not saved prefab to the hierarchy tree. How to make that appears in the prefab mode hierarchy tree cleanly?
  • The problem is the overlay is a new canvas which is possible to spawn independenly as a sibling when outside of prefab mode. In the prefab mode however it is only possible to have 1 top level canvas (the editing object). Then we need a new code path that sandwich our overlay Canvas in the top level Canvas in the case of prefab mode overlay.
  • What will happen to the overlay when we drill down and come back? Ideally I want it destroy and recreated on the next layer/previous layer in the case of coming back. So the state will still be synched with the Notch Simulator check box.
  • Exiting the prefab mode should resume the overlay behaviour in the outside mode accordingly, the overlay that was inside the prefab must be destroyed.

EditorPrefs are bad

The problem is that they persist to the other project. EditorPrefs are per-Unity client version. In the future I want to add more tools to switch between layouts, working on a portrait project then switch to horizontal project will make the useless settings spill over.

The correct way I think is to use ScriptableObject serialized to ProjectSettings like everything else so it is truly per-project. (Save-load with AssetDatabase.LoadAssetAtPath should be possible since normally I have to type "Assets/" to the path, now we simply change it to "ProjectSettings/" ??)

Then we could ditch the stupid string-as-key and just use declared fields as a proper storage.. it could serialize Color without the string gymnastic currently implemented too. lol

The MockupCanvas prefab could enter weird state on scene change

NoSo-MockupCanvas is a prefab which provide you in-editor mockup overlay. It is hidden in the Hierarchy, not selectable, and not saved with the scene with this HideFlags : private const HideFlags overlayCanvasFlag = HideFlags.HideAndDontSave;

Unfortunately this cause complication on changing scene, on trying to build and run, or on enter-exit play mode. I have put several play mode enter-exit fix on NotchSimulator.cs, but unfortunately when Unity is trying to clean up the scene, often it will throw this kind of error.

Screenshot 2019-04-20 16 04 46

If you get this, often the hidden game object is bugged until you restart Unity. We would like to fix this while preserving :

  • The overlay should not be saved with the scene and should not be visible in hierarchy.
  • The overlay should be preserved and carry over multiple scene in both edit mode and play mode. So it should be in DontDestroyOnLoad scene in play mode, and somehow destroy-create quickly in edit mode when loading scene non-additively.
  • The overlay should remains when entering and exiting play mode. Toggle the overlay in play mode is possible.
  • The overlay should not be visible in the Scene view, only in Game view. This is not possible atm without SceneVis API. 2019.1 has SceneVis but not yet the API part (I think)

SafePadding behaving incorrectly on non-mobile platforms

SafePadding renders incorrect padding on non-mobile platforms in 2019.3 and Device Simulator 2.+

As a workaround, I use the following scripts:

/// <summary>
    /// Provides a replacement for <see cref="Application"/> that better reports the platform currently being used.
    /// </summary>
    public static class EditorCompatibleApplication
    {
        public static RuntimePlatform platform
        {
            get
            {
#if UNITY_ANDROID
                return RuntimePlatform.Android;
#elif UNITY_IOS
                return RuntimePlatform.IPhonePlayer;
#elif UNITY_STANDALONE_OSX
                return RuntimePlatform.OSXPlayer;
#elif UNITY_STANDALONE_WIN
                return RuntimePlatform.WindowsPlayer;
#elif UNITY_WEBGL
                return RuntimePlatform.WebGLPlayer;
#endif
            }
        }

        public static bool isLandscape => Camera.main.aspect > 1f;

        public static bool isMobilePlatform
        {
            get
            {
#if UNITY_EDITOR
                // Game is being played in the editor and the selected BuildTarget is either Android or iOS
                if (EditorUserBuildSettings.activeBuildTarget == BuildTarget.Android ||
                    EditorUserBuildSettings.activeBuildTarget == BuildTarget.iOS)
                {
                    return true;
                }
#endif
                // Game is being played on an Android or iOS device
                if (platform == RuntimePlatform.Android ||
                    platform == RuntimePlatform.IPhonePlayer)
                {
                    return true;
                }
                // Game is being played on something other then an Android or iOS device
                else
                {
                    return Application.isMobilePlatform;
                }
            }
        }
    }

/// <summary>
    /// Disables the safe area when in WebGL, since it appears to misread the device stats in 2019.3.
    /// </summary>
    public sealed class SafeAreaInfluenceFix : UIBehaviour
    {
        [SerializeField] private SafePadding m_Target;

        private void Start()
        {
            if (!EditorCompatibleApplication.isMobilePlatform)
            {
                StartCoroutine(SetInfluence(0f));
            }
            else
            {
                StartCoroutine(SetInfluence(1f));
            }
        }

        private IEnumerator SetInfluence(float value)
        {
            m_Target.influence = value;
            yield return new WaitForEndOfFrame();
            m_Target.enabled = false;
            yield return new WaitForEndOfFrame();
            m_Target.enabled = true;
        }
    }

SafeAreaAdaptation

I am adding something related to non-UI notch adaptation next. In my game there is a camera facing world stuff that need to be adjusted based on notch size since the camera could also raycast to those like UI objects, and it became difficult to touch those world-things with notch present.

But in non-UI we have no layout system that tells everything to move, the solution will probably be very generic like telling Animator or PlayableDirector to evaluate a certain time according to the relative width of notch, then whatever is keyable by the animation system will be "adapted". The result ended up usable or not is up to the user to calibrate their blended state properly. You could use it creatively, like making the UI turns red the more notch is present on the screen, etc.

For example a perspective camera facing top-down to a billiard table. With notch I would probably want to move the camera a bit higher to show more empty space around the table (so those space goes to the notch instead of the edge of the table). Maybe this could be depending on Cinemachine, but if possible I don't want to have any package dependency yet.

NotchSolutionUIBehaviourBase.UpdateRect is private protected

Thank you for the great plugin! I'm planning to write an article about it.

I was trying to write a custom notch script that extends NotchSolutionUIBehaviourBase but I realized that it won't compile until I put it inside the NotchSolution/Runtime folder (which is harder when Package Manager is used). It's caused by the private protected abstract void UpdateRect(); method. Would you consider changing its visibility to protected?

Here's my custom notch script:

using E7.NotchSolution;
using UnityEngine;

public class NotchTest : NotchSolutionUIBehaviourBase
{
	private protected override void UpdateRect()
	{
		Rect safeArea = SafeAreaRelative;
		rectTransform.anchorMin = new Vector2( rectTransform.anchorMin.x, safeArea.yMax );

		m_Tracker.Clear();
		m_Tracker.Add( this, rectTransform, DrivenTransformProperties.AnchorMaxY | DrivenTransformProperties.PivotY );

		rectTransform.anchorMax = new Vector2( rectTransform.anchorMax.x, 1f );
		rectTransform.pivot = new Vector2( rectTransform.pivot.x, 1f );
	}
}

It expands the top background with the notch:

notch

Submission thread : notch information as returned by Unity's API research

I want to conduct a research what would Unity returns for Screen.safeArea (new in 2019.1) and Screen.cutouts (new in 2019.2). I have made an APK from Unity 2019.2 alpha that returns those information. Help appreciated!

  • Download the APK in the release page.
  • Then install on your Android with file manager or adb install -r (r = replace).
  • After it runs, rotate the device to both portrait and landscape and take 2 screenshots to remember information of landscape and portrait safe area & others as reported by Unity.
  • Paste those screenshots here! Thank you!

The experiment's data will be used to make a new UI component in the future which could avoid the actual notch rectangle, not just pad according to the safe area like SafeAreaPadding.

Add an actual Samples

The latest push adds a proper Sample~ folder format. However it is lacking a real sample because that is a debug scene. Have to show some practical mock UI sample using all the components.

Exception on reload

hi, we are getting following error each time unity is started and when scripts are compiled - tested on Unity 2020.1.0b11.3880, Unity 2020.1.0f1
Exception thrown while invoking [DidReloadScripts] method 'E7.NotchSolution.Editor.NotchSimulator:OnScriptsReloaded ()' : NullReferenceException: Object reference not set to an instance of an object
E7.NotchSolution.Editor.NotchSimulator.EnsureCanvasAndEventSetup (UnityEditor.Experimental.SceneManagement.PrefabStage prefabStage) (at Library/PackageCache/com.e7.notch-solution@6f1e6a308e/Editor/Simulator/NotchSimulator.cs:390)
E7.NotchSolution.Editor.NotchSimulator.UpdateAllMockups () (at Library/PackageCache/com.e7.notch-solution@6f1e6a308e/Editor/Simulator/NotchSimulator.cs:291)
E7.NotchSolution.Editor.NotchSimulator.OnScriptsReloaded () (at Library/PackageCache/com.e7.notch-solution@6f1e6a308e/Editor/Simulator/NotchSimulator.cs:269)

DontSave game object cannot be destroyed without error on scene change

Until Unity fix this, the effect of this is you cannot start a test without getting 3 errors each time. And you cannot build because build will switch scenes around and if the error occured the build is considered a failure. You have to restart Unity to ensure that there is no mockup object yet, do not press notch toggle, and then start a build.

I tried with non-prefab and also it cause problem. (reduced from 3 errors to 1) Seems like the core problem is with hide flag DontSave and it does not matter if it is HideAndDontSave or not. DontSave is very important for mockup overlay, we definitely don't want the overlay to save together. So I don't see any way around this until Unity fix this bug.

Track the report here :

https://fogbugz.unity3d.com/default.asp?1157422_sfvtcfi1jmvc3702
https://fogbugz.unity3d.com/default.asp?1167068_4884utp26ji27ro0

Notch-aware UIElements

UIElements (runtime) is coming with very good performance, and this talk https://www.youtube.com/watch?v=t4tfgI1XvGs shows a really promising tool to build it. Well, at some point I want everything to be supported in that.

It would be an insane amount of work since all game object based uGUI stack is now invalid. Still needed to be done at some point in the next year or something. After learning exactly how I can achieve it on UIE, I will slowly start extracting logic part to a more reusable method that could be shared with UIE. (Also it should be testable, for example look at calculation mess in SafePadding right now. It's waterfall and not reusable.)

Use AnimationMode somehow with the adaptation component

Currently the adapted/animated fields got modified for real and dirty the game object. This is annoying on prefabs since it cause bolded override even though you just want to preview the changes.

We maybe able to emulate the Timeline package's approach where it also use Animation Playables API but it is revertable. The entry point to that should be AnimationMode. How to collect to-revert property from clips could be like in PropertyCollector.cs of Timeline package.

        public void AddFromClips(GameObject obj, IEnumerable<AnimationClip> clips)
        {
            if (Application.isPlaying)
                return;

            // Add RootMotion TR property in animation mode snapshot as well if animator bindings didn't do it.
            var animator = obj.GetComponent<Animator>();
            bool addRoot = (animator != null && !animator.isHuman && !animator.applyRootMotion);

            m_CurveBindingSet.Clear();
            foreach (var c in clips)
            {
                addRoot |= c.hasRootCurves | c.hasMotionCurves | c.hasRootMotion;

                m_CurveBindingSet.UnionWith(AnimationClipCurveCache.Instance.GetCurveInfo(c).rawBindings);
                m_CurveBindingSet.UnionWith(AnimationClipCurveCache.Instance.GetCurveInfo(c).objectBindings);
            }
            m_CurveBindingSet.UnionWith(m_AnimatorCache.GetAnimatorBindings(obj));

            foreach (var binding in m_CurveBindingSet)
            {
                if (binding.type != typeof(Animator) && !IsEulerHint(binding))
                    AnimationMode.AddEditorCurveBinding(obj, binding);
            }

            if (addRoot)
                AnimationMode.AddTransformTR(obj, string.Empty);
        }

There are cases with tons of overlay mockups hidden

Normally I set the hide flags as hidden so you don't see it, plus an "active" one is only a single instance so it doesn't look like this bug exist. By removing the hide from hide flags, it is revealed that sometimes the old existing instance was not reused and a new one is created in its place. This occur frequently on recompilation. While it doesn't affect workflow and they will all go away together because of DontSave, it should be fixed anyways.

Screenshot 2019-07-05 14 34 54

SafeAreaOffset

I started to find the need of an another component which do not control RectTransform's size at all, but rather only locks one axis of anchored position to be offsetted equal to safe area.

I am thinking should this be a function of SafeAreaPadding or a new component, but I believe it is a new component since it doesn't require size locking. (Also it would be easier to maintain code)

Driving just the anchored position is easy to make an Unlocked mode that I want for SafeAreaPadding but having difficulty programming it much more easily. Unlike "padding" which turns out to be related to many fields on the RectTransform anchored position is just an easy to understand, pure value.

Also with just anchored position, I believe it will be easier to integrate 2019.2's Cutout later on. For example, offsetting to the left of Galaxy S10's corner cutout when trying to anchor to the top right corner. If you use SafeAreaPadding, the only choice is to go down.

Controller asset + adaptation clips preset generator for adaptation components

I would like a button on any adaptation component if both clip slots is currently empty (or right click context menu) in the same fasion as Button component button to create an animation asset with nested clip asset.

So if I press this button :

  • I want to get 1 controller asset called XAdaptationDesigner with 2 clips inside called XNormal and XAdapted. (The same as Button which create a controller with Normal Pressed Disabled etc. clips, which save space on your Project tab)
  • X is a prefix derived from somewhere or from a text box besides the button.
  • The controller asset has 2 graph node with the 2 clips so it is displayed on the Animation tab dropdown.
  • The controller asset is connected to Animator along with both clips to the adaptation component clip slot, instantly allowing me to design both clips on Animation tab.

After I am done, I could delete only the controller asset from Animator slot because playables API use only clips and an empty Animator. (It should have a warning helpbox that says you should remove the controller asset, on the adaptation component. Or even better a remove button so I could keep Animator component folded.)

Unity changed their device.json format

Got no time to look at yet, not sure if we have to edit anything to be compatible with them or not. Quoted from my bug report :

Re: (Case 1194745) [Device Simulator] NullReferenceException is thrown when opening a device with json with no deviceinfo set

Hi,

Thanks for reporting the issue. We have fixed this problem and it should not appear in Device simulator 2.0.0-preview and above.

The device.json format has been changed in Device Simulator 2.0.0-preview. A new format is documented in
https://docs.unity3d.com/Packages/[email protected]/manual/device-format.html

The documentation contains an example of a minimal device, with only required fields set.

What is more, a detailed warning will be thrown in the console if device has missing info in the device.json file. If warnings are thrown for a device, this device will be ignored.

Please note that the minimum Unity version for Device Simulator 2.0.0-preview is now 2019.3.0f1.

Thanks,
Lukaš
Customer QA Team

https://docs.unity3d.com/Packages/[email protected]/manual/device-format.html

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.