Improve Frame rate on too many UI Images - Unity UI

问题

In my single page, there were so many textures those I require to render before I was just facing problem in just screen opening but this I was able to resolve this suggestion:

OnBecomeVisible for Canvas UI Objects

Here is the actual code that I used for this purpose:

public void OnValueChangeRefreshCards (Vector2 valueChange)
{
    elapsedYDist += valueChange.y;

    if (elapsedYDist > 3f) {
        elapsedYDist = 0f;
        for (int i = 0; i < GameConstants.TOTAL_ROSE_COUNT; i++) {
            Card card = roseList [i].GetComponent<Card> ();

            if (RendererExtensions.IsVisibleFrom (card.MyRectTransform, Camera.main))
                card.roseImage.enabled = true;
            else
                card.roseImage.enabled = false;
        }
    }
}

But now I started too much framerate lose related issue so even scrolling of page become really difficult for me. Please check the attached video for more clearance about the issue, I was facing. NameThatRose - Low Frame Rate

Please give me some suggestions for next improvements.

EDIT: Here are my profiler output.

Detailed Deep Profiler
Overview Deep Profiler

回答1:

You can try few things to find out whats causing the low fps.

Use profiler to deep profile to find out which UI call is taking more time. Like what I did here. As Image inherits from UIMaskableGraphics, it calls MaskableGraphics.OnEnable() every frame for every image in your list. This takes up time which you can see here:

I believe your OnValueChanged method is called every frame this would only multiply the enable/disable iterations and its processing time. You can limit the call by some time, processing 4 times a second for example.

float timeSinceLastUpdate = 0;

void Update()
{
    timeSinceLastUpdate += Time.deltaTime;
}

public void OnValueChangeRefreshCards (Vector2 valueChange)
{
    if(timeSinceLastUpdate < 0.25f)
    {
        return;
    }
    timeSinceLastUpdate = 0;

    // do your stuff here...
}

You have 250+ images to process every frame which is a big deal for older Android devices, again as MaskableGraphics.OnEnable() call can be the culprit. You can avoid changing the state if it is required:

if (RendererExtensions.IsVisibleFrom (card.MyRectTransform, Camera.main))
{
    if(!card.roseImage.enalbed)
        card.roseImage.enabled = true;
}
else
{
    if(card.roseImage.enalbed)
        card.roseImage.enabled = false;     
}

Furthermore, following are some helpful links to optimize UI in Unity: